Угловой. Как фильтровать динамический массив в контроллере?

может кто-нибудь помочь мне с проблемой? Nf n У меня есть массив объектов, который отображается в таблице, и у меня есть поиск. Каждый объект представляет собой одну строку в таблице. Основная проблема заключается в массиве. Мы можем изменить его в любое время (можете добавлять новые строки, удалять существующие строки и изменять значение в таблице), даже если мы что-то ищем.Угловой. Как фильтровать динамический массив в контроллере?

Теперь у меня есть что-то вроде этого:

$scope.$watch('search', function() { 
    if($scope.search!== "") { 
     if(! $scope.initArray.length) { 
      $scope.initArray= $scope.array; 
     } 
     $scope.array= $filter('filter')($scope.initArray, function(item) { 
      return item.name1.indexOf($scope.search) > -1 || 
        item.name2.indexOf($scope.search) > -1 || 
        item.name3.toLowerCase().indexOf($scope.search) > -1; 
     }); 
    } else { 
     $scope.array= $scope.initArray; 
    } 
});

Как вы можете видеть, я использую два массива. Все хорошо, но когда я хочу изменить $ scope.array, мне нужно изменить $ scope.initArray. И это вызывает много проблем.

Например, таблица имеет 3 строки. Каждая строка состоит из 3 коломнов. Я что-то ищу, и он находит только одну строку (поиск должен найти значение хотя бы в одном из colomn). После этого я добавляю новую строку. Он отображается в таблице, если он содержит значение, которое я ищу. Если мы очистим поле поиска, все данные будут отображены обратно. Для этого правильного поведения я должен делать много равных манипуляций с $ scope.initArray и $ scope.array. Если я использую только один массив, после того, как таблица поиска содержит неправильные данные.

Есть ли способ, которым я могу использовать только один массив?

$ scope.array Передаю его пользовательскому интерфейсу.

$ scope.initArray это исходные данные (до поиска)

источник

2016-02-03 Marichka Zimokha

Есть два способа держать только одну копию данных:

Фильтр данных в шаблоне, а не в контроллере
Использование функции в качестве источника данных в шаблоне

Вот демо обоих методов:

angular.module('filterExample', []) 
 
.filter('myFilter', function() { 
 
    return function(input) { 
 
    var output = []; 
 
    for (var idx in input) { 
 
     var item = input[idx]; 
 
     if (item != 'row2') { 
 
     output.push(item.toUpperCase()); 
 
     } 
 
    } 
 
    return output; 
 
    }; 
 
}) 
 
.controller('MyController', ['$filter', function($filter) { 
 
    this.data = ['row1', 'row2', 'row3']; 
 
    this.getFilteredData = function(input) { 
 
    // here you can use this.search to filter the data 
 
    // while keeping the original array unmodified 
 
    return $filter('myFilter')(this.data); 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="filterExample"> 
 
    <h2>Initial data</h2> 
 
    <table ng-controller="MyController as ctrl"> 
 
    <tr ng-repeat="row in ctrl.data"> 
 
     <td>{{row}}</td> 
 
    </tr> 
 
    </table> 
 
    <h2>Filtered data, use filter in the template</h2> 
 
    <table ng-controller="MyController as ctrl"> 
 
    <tr ng-repeat="row in ctrl.data | myFilter"> 
 
     <td>{{row}}</td> 
 
    </tr> 
 
    </table> 
 
    <h2>Filtered data, filter data in the function</h2> 
 
    <table ng-controller="MyController as ctrl"> 
 
    <tr ng-repeat="row in ctrl.getFilteredData()"> 
 
     <td>{{row}}</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
</html>

источник

2016-02-03 19:49:36

Угловой. Как фильтровать динамический массив в контроллере?

ответ

Смежные вопросы