CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
Kunal Vashist
Kunal Vashist

Reputation: 2471

How to filter list using angularjs

I have an array of objects initially on load no filter should be applicable then on user selection combination list should be displayed accordingly.

Fiddle

I am not able to get what wrong did i done over here whole list i not displaying and only single selection works at a time. For single selection i used

 return $scope.filter[stat.userStatus] || noFilter($scope.filter);

I cannot make both selection work together.

Upvotes: 8

Views: 6748

Answers (3)

Aman Dhanjal
Aman Dhanjal

Reputation: 414

I was able to get your code working. This is kind of a fix and a better approach would be making a filter(working on that as well). Assumptions that I made :-

By Member Status filter means checking 'userStatus'

By ADMIN Status filter means checking 'roles'

Check out this Plnkr

I am filtering on the basis of an object which updates based on $scope.filter.

Changes to HTML

<div ng-repeat="item in mylist | filter:filterModel">

Changes to JS

$scope.filterModel =
        {
           "userStatus":"",
            "roles" : ""
        }
    $scope.$watch('filter', function() {
        var myModel =
        {
           "userStatus":"",
            "roles" : ""
        }
        if($scope.filter.administrator && $scope.filter.lead)
        {    
            myModel.userStatus="";
        }
        else if($scope.filter.administrator)
        {
            myModel.userStatus="admin";                
        }
        else if($scope.filter.lead)
        {
            myModel.userStatus="lead";
        }
        else
        {
            myModel.userStatus="";
        }
        if(angular.equals($scope.filter.selectedSearch,'Default'))
        {
            myModel.roles="";
        }
        else
        {
            myModel.roles=$scope.filter.selectedSearch;
        }
        $scope.filterModel=myModel;
   },true);

UPDATE : Mark's filter seems to be working correctly

Upvotes: -1

j.wittwer
j.wittwer

Reputation: 9497

Filters can be chained together, like so: 

<div ng-repeat="item in mylist | filter:filterByStatus | filter:filterByRole">

The filters run from left to right, with each filter passing the filtered array to the next filter.

Here is a fork of Mark's fiddle, demonstrating this technique: http://jsfiddle.net/2671uggu/

Upvotes: 2

Mark Ni
Mark Ni

Reputation: 2401

Please use the SAME naming and case everywhere in your code

  • admin is not the same as administrator
  • admin is not the same as Admin

If I understand correctly, The basic idea follows, 

    $scope.filterByCategory = function (stat) {
        //check if user has a status matching checkbox select
        var by_status = $scope.filter[stat.userStatus];
        //check if user has a role that matching dropdown list select   
        var by_roles = stat.roles.indexOf($scope.filter.selectedSearch) !== -1;

        return by_status || by_roles; //statisfy either of two will return true;
    };

Full demo: http://jsfiddle.net/6rqL6zxh/

Upvotes: 0

Related Questions