angular.js不可知过滤器

时间:2015-07-29 19:04:32

标签: angularjs filter

我是Angular.js的新手,我正在阅读我的第一本书并想到停止并试验到目前为止我学到的东西。我尝试创建一个limitTo过滤器,但该号码将由用户插入。

        <script>
            var monthly=[123.659855, 89.645222, 97.235644, 129.555555]
            function MyFilterDemoCtrl($scope) {$scope.monthly= monthly;};
        </script>

 Num: <input ng-model="num" type="text" />

         <li ng-controller="MyFilterDemoCtrl" ng-repeat="gigabytes in monthly | limitTo:{{num}}"> {{ gigabytes | number:2}} </li>

因此,当我在3中输入Num时,只会在li中打印前三个数字。但我一无所获。我错过了什么以及实施这项任务的正确方法是什么?我的代码应该是limitTo:{{num}}还是limitTo:num

提前致谢

1 个答案:

答案 0 :(得分:1)

两件事:

  1. 您需要在控制器范围内拥有ng-model="num"。只需将ng-controller移到其声明之外即可解决此问题。
  2. 应该是limitTo: num而不是limitTo: {{num}}。您没有将num的值插入到字符串中。
  3. var monthly = [123.659855, 89.645222, 97.235644, 129.555555];
    
    function MyFilterDemoCtrl($scope) {
      $scope.monthly = monthly;
    }
    
    angular.module('app', [])
      .controller('MyFilterDemoCtrl', MyFilterDemoCtrl);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <div ng-app="app" ng-controller="MyFilterDemoCtrl">  
      
      Num: <input ng-model="num" type="text" />
    
      <li ng-repeat="gigabytes in monthly | limitTo: num"> 
          {{ gigabytes | number:2}} 
      </li>
             
    </div>