Как отфильтровать многомерный массив с помощью limitTo в AngularJS - PullRequest
Новая
       33

Как отфильтровать многомерный массив с помощью limitTo в AngularJS

0 голосов
/ 07 мая 2019

У меня есть следующий многомерный массив в контроллере. 

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>

Но из приведенного выше фрагмента кода я могу ограничивать записи, но не могу фильтровать их по входным данным.

Ответы [ 2 ]

0 голосов
/ 21 мая 2019

ng-if вызывал проблему. Я заменил ng-if на ng-show, и это сработало.

Я нашел объяснение различий между ними в следующем посте.

В чем разница между ng-if и 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>

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 07 мая 2019

Это из-за второго значения, которое вы добавили в свой фильтр LimitTo. Как написано в документации 

{{ limitTo_expression | limitTo : limit : begin}}

второе значение устанавливает индекс, с которого начинается ограничение. Если вы удалите 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>

Демо

...