小编Oam*_*Psy的帖子

我想做的很简单.用户输入一个值,就按一下按钮,我叫JS中检索我的JSON数据和执行上对JSON输入的值搜索的服务,如果发现匹配,显示"所有者".

HTML:

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <input type="text" ng-model="enteredValue">
        </br>
        <button type="button" ng-Click="findValue(enteredValue)">Search</button>
    </div>
</div>

JS:

angular.module('myApp', []).controller('MainCtrl', function ($scope, $http, getDataService) {   

    $scope.findValue = function(enteredValue) {     
        alert("Searching for = " + enteredValue);

        $scope.MyData = [];

        getDataService.getData(function(data) {

            $scope.MyData = data.SerialNumbers;

        });
    }

});

angular.module('myApp', []).factory('getDataService', function($http) {
    return {
        getData: function(done) {
            $http.get('/route-to-data.json')
            .success(function(data) { 
                done(data);
            })
            .error(function(error) {
                alert('An error occured');
            });
        }
    }
});

我的JSON:

{
    "SerialNumbers": {
        "451651": [
            {
                "Owner": "Mr Happy"
            }
        ],
        "5464565": …

在页面加载时,我有一个调用服务的控制器,然后将返回的数据绑定到某些$ scope.objects:

app.controller("MainController", function($scope, $http, serviceGetData) {

    serviceGetData.getData(function(data) {
        $scope.LoginCount = data.LoginCount;
        $scope.ProductInfo = data.ProductInfo;
        $scope.ProfileInfo = data.ProfileInfo;

        // Delayed binding
        $scope.OrderHistory  = { History: [] };
    }

    $scope.populateModel = function(model, values) {
        var isArray = $.isArray(values);

        $.each(values, function(key, value) {

            if (isArray) {
                key = this.key;
               value = this.value;
            }

            if (model[key] !== value) {
                model[key] = value;
            }

        });
    };
}

在我的HTML中,我尝试通过以下方式绑定$ scope.OrderHistory:

<h1><a href="#" ng-click="populateModel(OrderHistory  , { History: OrderEntries })" >View order details</a></h1>

这在笔记本电脑/台式机上观看时很好,但在平板电脑和移动设备(如iphone/ipad)中无法正常工作

我目前有一个简单的数据绑定:

{{ myAccount.Balance }}

我认为应用了几个过滤器:

{{ myAccount.Balance | filter1 | filter2 }}

但是,当Balance小于零时,我想使用三元运算符,以下工作(没有过滤器):

{{ myAccount.Balance > 0 ? myAccount.Balance : myAccount.Balance + 'minus' }}

我怎样才能使用上面的过滤器1和2？

我使用过这里的一种风格:http://tympanus.net/Development/TextInputEffects/index.html

要创建输入指令,请参阅plunker:https://plnkr.co/edit/wELJGgUUoiykcp402u1G ？ p = preview

这适用于标准输入字段,但是,我正在努力工作wirth Twitter typeahead:https://github.com/twitter/typeahead.js/

问题 - 如何将我的浮动输入标签与typeahead一起使用？

app.directive('floatInput', function($compile) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      elemTitle: '=elemTitle',
      elemtId: '=elemeId'
    },
    templateUrl: 'input-template.html',
    link: function(scope, elem, attrs) {
      var ngModelName = elem.attr('input-model');
      var inputElem = angular.element(elem[0].querySelector('input'));
      inputElem.attr('ng-model', ngModelName);

      $compile(inputElem)(scope);
      $compile(inputElem)(scope.$parent);

      var inputLabel = angular.element(elem[0].querySelector('label span'));
      inputLabel.attr('ng-class', '{\'annimate-input\' : '+ngModelName+'.length > 0}');
      $compile(inputLabel)(scope);
    },
    controller: function($scope) {
      $scope.title = $scope.elemTitle;
      $scope.inputId = $scope.elemId
    } …

我是新来AngularJS和最近推出它变成我的应用程序.我想重新写一些我现有的jQuery代码在我的控制器,但是,有一次,我使用:

jQuery的:

if ($(window).width() < 700) {

   $('.productsHeading').on('click', function() {

       $(".productsBody").hide();
       $(".aboutUsBody").show();

   });
}

我可以避开.hide()与.show()使用ng-hide="productsBody"和ng-hide="aboutUsBody"我的DIV内.这些都是经过处理的ng-click="productsheading()".不过,我面临的问题是,我该如何处理:

if ($(window).width() < 700) {

在AngularJS？我使用AngularJS V1.1.5

如果我有一个返回日期的变量,格式为dd MMM yyyy,那么2014年8月28日,我怎样才能得到上个月的日期.

我可以通过以下方式修改月份:

$scope.DateMapping = function (months) {

    var myVariable = "28 Aug 2014"
    var makeDate = new Date(myVariable);
    prev = new Date(makeDate.getFullYear(), makeDate.getMonth()+1, 1);

});

基本上,这是在本月增加一个..但我怎么能解释多年,所以如果当前日期是2014年12月12日,那么之前的日期是2013年1月12日？

我的应用程序使用AngularJS可以使用过滤器.

更新:

    var myVariable = "28 Aug 2014"
    var makeDate = new Date(myVariable);
    var prev = new Date(makeDate.getFullYear(), makeDate.getMonth()+1, makeDate.getMonth());

    console.log(myVariable)
    console.log(makeDate)
    console.log(prev)

Output:

    28 Aug 2014
    Thu Aug 28 2014 00:00:00 GMT+0100 (GMT Standard Time)
    Mon Sep 01 2014 00:00:00 GMT+0100 (GMT Standard Time)

虽然月份增加了,但是这一天显示为01而不是28？

我正在使用角度手风琴指令来隐藏/显示内容.

我面临的问题是内容容器的高度没有变化.

这是一个吸烟者:http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c？p =preview

如果单击"显示更多",则可以看到内容是如何隐藏的,而不是显示作业的高度更改.

JS:

app.directive('sliderContentDirective', function () {
    return {
        restrict:'A',
        compile: function (element, attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');

            return function postLink(scope, element, attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '0.7s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'height': '0px',
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
});

app.directive('sliderToggleDirective', function($document, $timeout) …

我有一个带有表单和许多输入字段和轮播的HTML页面.在表格的底部是一个button到添加另一个报价 ..本质上,输入字段的副本上述(整体class="quote").

HTML:

<form name="myForm">

    <div class="quote">
        <p>Enter the fields below</p>
        <input type="text" ng-model="'firstname'+{{$index}}" />
        <input type="text" ng-model="'surname'+{{$index}}" />
        <input type="text" ng-model="'postcode'+{{$index}}" />
        <input type="text" ng-model="'productid'+{{$index}}" />
        <input type="text" ng-model="'price'+{{$index}}" />

        <div class="carousel">
            <img src="/assets/img/chair.jpg" alt="" />
            <img src="/assets/img/spoon.jpg" alt="" />
            <img src="/assets/img/table.jpg" alt="" />
            <img src="/assets/img/tap.jpg" alt="" />
        </div>

        <button class="add-another" ng-click="addAnother()">Add another quote</button>
    </div>

</form>

我想要实现的是点击add-another,插入class ="quote"的副本,其中{{$ index}}也会在点击时增加.这个想法是允许无限制地添加行...所以结果将是:

<form name="myForm">

    // First quote ////////////////
    <div class="quote">
        <p>Enter the fields below</p>
        <input …

我有两个input代表小时和分钟的字段.

<input type="number" min="0" max="24" step="1" value="00" class="hours">
<input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes">

显示为:

0:0

要么:

5:3

有没有办法将其显示为:

00:00

要么:

05:03

即24小时数据格式(在人们建议之前,我不能使用type ="time").

我有一个简单的Angular http.get:

app.factory('countriesService', function($http) {
return {
    getCountryData: function(done) {
        $http.get('/resources/json/countries.json')
        .success(function(data) { done(data);})
        .error(function(error) {
            alert('An error occured');
        });
    }
}
});

示例.JSON:

{
"NoCities": 66,
"Balance": 2103,
"Population":  63705000,
"CityInfo": [
    {
        "CityName": "London",
        "CityPopulation": "7825200",
        "Facts": {
            "SubFact1": "xzy",
            "SubFact2": "xzy",
            "SubFact3": "xzy",
            "SubFact4": "xzy",
            "SubFact5": "xzy"
        },
    },
    {
        "CityName": "Manchester",
        "CityPopulation": "2584241",
        "Facts": {
            "SubFact1": "abc",
            "SubFact2": "abc",
            "SubFact3": "abc",
            "SubFact4": "abc"
        },
    }

],
"SubmitInfo": null,
"FormAction": null,
"FormController": null,
}

我注意到当我的页面执行.length时,有时可能需要一段时间来加载数据,例如:

<div>
    <a>Countries</a> …