Question

我在控制器中有一个多维数组。

var app = angular.module('myApp',[]);
app.controller('myController',function($scope){
   $scope.myData = [{name:'Person1',surname:'Surname1'},
                    {name:'Person2',surname:'Surname1'},
                    {name:'Person3',surname:'Surname2'},
                    {name:'Person4',surname:'Surname3'},
                    {name:'Person5',surname:'Surname3'}];
});

我尝试使用以下代码将limitTo和filter与ng-repeat结合使用，以过滤和限制元素的显示。

<div ng-if="myData.length !== 0"><input type="text" placeholder="Enter name to search" ng-model="mySearch"/></div>
<table>
<thead>
  <tr>
   <th>Name</th>
   <th>Surname</th>
  <tr>
</thead>
<tbody>
  <tr ng-repeat="tr in myData | filter:{name:mySearch} | limitTo: 1:2">
   <td ng-bind="tr.name" ng-cloak></td>
   <td ng-bind="tr.surname" ng-cloak></td>
  <tr>
</tbody>
</table>

但是从上面的代码中，我只能限制记录，但不能基于输入进行过滤。

Answer 1

这是因为您已将第二个值添加到LimitTo筛选器中。正如文档中所写

{{ limitTo_expression | limitTo : limit : begin}}

第二个值设置开始限制的索引。如果您从limitTo中删除2，则您的代码应该可以按照您想要的方式工作。

  <tr ng-repeat="tr in myData | filter:{name:mySearch} | limitTo: 1">
   <td ng-bind="tr.name" ng-cloak></td>
   <td ng-bind="tr.surname" ng-cloak></td>
  <tr>

Demo

Answer 2

ng-if引起了问题。我用ng-if取代了ng-show，它起作用了。

在下一篇文章中，我找到了关于两者之间差异的解释。

What is the difference between ng-if and ng-show/ng-hide

更改后的代码：-

<div ng-show="myData.length !== 0"><input type="text" placeholder="Enter name to search" ng-model="mySearch"/></div>
<table>
<thead>
  <tr>
   <th>Name</th>
   <th>Surname</th>
  <tr>
</thead>
<tbody>
  <tr ng-repeat="tr in myData | filter:{name:mySearch} | limitTo: 1:2">
   <td ng-bind="tr.name" ng-cloak></td>
   <td ng-bind="tr.surname" ng-cloak></td>
  <tr>
</tbody>
</table>

希望这对某人有帮助。

如何在AngularJS中使用limitTo过滤多维数组

2 个答案: