Filter Results in AngularJS

Question

I have ng-click in my view, which is supposed to filter my presented results.

<a role="menuitem" tabindex="-1" href ng-click="itemFilter=itemABCFilter">ABC Filter</a>

All items from ABC are stored in my controller, such as

$scope.itemABC=["Alpha","Beta","Gamma"];

A list of all items in my view come from a $http request I made. No I seek loop through all data.item (my data I obtained from the get request) and find out whether it contains any element of itemABC or can be considered as a substring of any of the elements of itemABC it.

  $scope.itemABCfilter=function(data){
    for (var j=0; j<$scope.itemABC.length;j++){
      if($scope.itemABC[j].search($scope.data[i].name)>-1) return true;
    }

Somehow the code above does not filter my results. Do I handle the $http request results not correctly or is the code simply wrong? How would you do it?

The $http request looks like this and works just fine.

$scope.method='GET';
      $scope.url='/files/itemdata.js';
      $scope.fetch=function(){
          $http({
              method:$scope.method,
              headers:{'Content-Type': 'application/x-www-form-urlencoded'},
              cache:true

          })
              .success(function(data,status){
                  $scope.status=status;
                  $scope.data=data;
                  console.log(data);
                  console.log(status);
                  itemABCFilter();

              })
              .error(function(data,status){
                  $scope.data=data||"Request failed";
                  $scope.status=status;
              })
      };

To access the results of the http request, I use data[i].name....However, it does not seem to work in the loop.

Answer 1

You can try to create your custom filter for that case:

HTML

<div ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in items | myFilter:list">{{item.name}}</li>
  </ul>
  <a ng-click="filterResults()">Filter results</a>
</div>

JavaScript

angular.module('app', []).
  controller('ctrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data.json').success(function(data) {
      $scope.items = data;
    });
    $scope.filterResults = function() {
      $scope.list = ["Alpha", "Beta", "Gamma"];
    }
  }]).
  filter('myFilter', function() {
    return function(data, list) {
      if(data && list) {
        return data.filter(function(item) {
          return list.reduce(function(prev, cur) {
            return prev || item.name.indexOf(cur) !== -1;
          }, false);
        });
      } else {
        return data;
      }
    }
  });

Live demo here.

Example where search is over all properties (not only name) here.

Answer 2

If you are displaying a set of data results the best way to filter them is using filters and from my understanding as you have multiple values you wish to filter by a filter function is required.

<li ng-repeat="item in items|filter:abcFilter">{{item.name}}</li>

Then the filter function would be available in scope

$scope.abcFilter = function(item){
  return $scope.itemABC.indexOf(item.name) > -1;     
}

So you can see if the filter function returns true the item will be displayed.