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

【问题标题】：How to filter Multidimensional Array with limitTo in AngularJS如何在AngularJS中使用limitTo过滤多维数组
【发布时间】：2019-09-24 18:33:36
【问题描述】：

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

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>

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

【问题讨论】：

标签： angularjs multidimensional-array angularjs-ng-repeat angularjs-filter angularjs-limitto

【解决方案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

【讨论】：

我已经尝试过您的建议，但无法使用关键字进行过滤。我正在使用 AngularJS v1.6.9
@BBRK 请检查 plunker 演示。在输入中输入 Person2，看看结果如何变化。
是的，我看到了演示，它按预期工作，不知道为什么它在我的最后不起作用。
@BBRK 您的输入中有错字，请注意输入中的 m。
我刚刚更新了我的问题，你能检查一下这是否可能导致问题。

【解决方案2】：

ng-if 导致了该问题。我用ng-show 替换了ng-if，它成功了。

我在下面的帖子中找到了关于两者之间差异的解释。

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>

希望这对某人有所帮助。

【讨论】：