Angular. How can I filter dynamic array in controller?

Question

could someone help me with issue?nf n I have array of objects which is displayed in table and I have search. Every object is one row in table. The main problem is in array. We can modify it at any time (can add new rows, delete existing rows and change value in table) , even if we search something.

Now I have something like this:

$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;
   } 
 });

As you can see, I use two arrays. Everything is good, but when I want to change $scope.array I have to change $scope.initArray. And it causes a lot of issues.

For example, table has 3 rows. Every row consist of 3 colomns. I search something and it finds just one row (search has to find value at least in one of colomn). After that I add new row. It displays in table if it contains value I'm searching for. If we clear search field, all data is displayed back. For this correct behavior, I have to do a lot of equal manipulation with $scope.initArray and $scope.array. If I use just one array, after searching table contains incorrect data.

Is there a way where I can use just one array?

$scope.array I pass it to UI.

$scope.initArray it's initial data (before search)

Borys Serebrov · Accepted Answer · 2016-02-03 19:49:36Z

There are two ways to keep only one copy of the data:

Filter data in the template and not in the controller
Use function as a data source in the template

Here is a demo of both methods:

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>

Collectives™ on Stack Overflow

Angular. How can I filter dynamic array in controller?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related