Question

这是我的代码，基于here。 limitTo是动态的，并从用户输入中获取其值。

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

<body ng-controller="MyFilterDemoCtrl" >
 Num: <input ng-model="num" type="text" />
 <li ng-repeat="gigabytes in monthly | limitTo:num"> {{ gigabytes}} </li>
<body>

我想知道如何像这样改变limitTo过滤器

<li ng-repeat="gigabytes in monthly | limitTo:monthly.lenght() OR num">

所以当页面加载（输入为空）时，将显示数组中的所有项目，当用户键入数字时，将显示正确数量的项目。

（页面加载，显示所有项目，然后是用户类型3，只显示前3个项目）

为了使其“完美”，我想知道当输入超出数组长度时如何向用户打印消息。

提前致谢

修改

现在的代码，无法显示所有项目，然后重新显示用户输入。在页面加载时显示所有内容的唯一方法是

gigabytes in monthly track by $index | limitTo:num

但是用户输入无效。我使用角1.2.28。我实际上并没有得到track by $index的概念。再次感谢

Answer 1

您提出的第一件事没有多大意义，因为当页面加载num过滤器将为空时，因此没有过滤器将应用于列表，并且默认情况下将呈现所有列表项。所以你不必在这做任何特别的事情。

至于在超过列表项数量的情况下显示消息，您可以使用ngShow指令ng-show="num > monthly.length"来执行此操作。像这样：

Num:
<input ng-model="num" type="text" />
<div ng-show="num > monthly.length">You only have {{monthly.length}} items.</div>
<li ng-repeat="gigabytes in monthly | limitTo:num"> {{ gigabytes}} </li>

Answer 2

如果您在1.4之前使用角度版本，则需要执行以下操作：

 <li ng-repeat="gigabytes in monthly | limitTo:num || monthly.length">{{ gigabytes}}</li>

angular.module('app', []).controller('MyFilterDemoCtrl', MyFilterDemoCtrl);


function MyFilterDemoCtrl($scope) {
  $scope.monthly = [123.659855, 89.645222, 97.235644, 129.555555];
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>


<body ng-app="app" ng-controller="MyFilterDemoCtrl" ng-init="vm={}">
  Num:
  <input ng-model="vm.num" type="text" />
  <ul>
    <li ng-repeat="gigabytes in monthly | limitTo:vm.num || monthly.length track by $index">{{ gigabytes}}</li>
  </ul>

  <body>

1.4+内部处理with a check on NaN

限制为来自1.4的源代码段： -

if (Math.abs(Number(limit)) === Infinity) {
  limit = Number(limit);
} else {
  limit = toInt(limit);
}
if (isNaN(limit)) return input;

所以你可以做你现在正在做的事情：

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

angular.module('app', []).controller('MyFilterDemoCtrl', MyFilterDemoCtrl);


function MyFilterDemoCtrl($scope) {
  $scope.monthly = [123.659855, 89.645222, 97.235644, 129.555555];
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>


<body ng-app="app" ng-controller="MyFilterDemoCtrl" ng-init="vm={}">
  Num:
  <input ng-model="vm.num" type="text" />
  <ul>
    <li ng-repeat="gigabytes in monthly | limitTo:vm.num  track by $index">{{ gigabytes}}</li>
  </ul>

  <body>

如果您使用的是track by expression it should come in the end of the expression，

注意：track by必须始终是最后一个表达式：

即

for 1.4

<li ng-repeat="gigabytes in monthly | limitTo:num track by $index">

或旧版本

<li ng-repeat="gigabytes in monthly | limitTo:num || monthly.length track by $index">

Answer 3

这个怎么样：

＆＃13;

var monthly = [123.659855, 89.645222, 97.235644, 129.555555];

function MyFilterDemoCtrl($scope) {
  
  $scope.monthly = monthly;
  
  $scope.limit = function() {
  
    return $scope.num || $scope.monthly.length;
  }
}

angular.module('app', [])
  .controller('MyFilterDemoCtrl', MyFilterDemoCtrl);

＆＃13;

<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: limit()"> 
      {{ gigabytes | number:2}} 
  </li>
         
</div>

＆＃13;

angular.js过滤器具有动态和默认值

3 个答案: