Angularjs ng-repeat filter property with more than one variable?

Question

I'm trying to something like

<ion-item class="item-icon-right " ng-repeat="project in jsonObj.Projects | filter:projectArea:true:ProjectStatus" type="item-text-wrap" ui-sref="tabs.detail({project:project['Project name']})">
  <div class="row">
    <div class="col col-45">
      <h2>{{project["Project name"]}}</h2>
      <h4>{{project["PM"]}}</h4>
    </div>

    <div class="col col-45"></div>
    <div class="col col-10">
      <span class="badge badge-assertive icon-badge"><i class="ion-ios-arrow-right"></i></span>
    </div>
  </div>
</ion-item>

Controller:

angular.module('App')
 .controller('ProjectsController', function ($scope, $rootScope, $stateParams, $state) {
        $scope.projectArea = $stateParams.area;
        $scope.ProjectStatus = $stateParams.Project_Status;      
  });

Data:

{PM: "Oommen", Area: "Foods", Project name: "PLuM", Reviewer: "Alex", A&D Start Date: "7-Dec-15"…}$$hashKey: "object:31"A&D End Date: "15-Jan-16"A&D Start Date: "7-Dec-15"Area: "Foods"Build End Date: "TBD"Build Start Date: "TBD"Implementation date: "TBD"PM: "Oommen"Project Status: "Green"Project name: "PLuM"Reviewer: "Alex"SIT End Date: "TBD"SIT Start Date: "TBD"ST End Date: "TBD"ST Start Date: "TBD"Status: "HLD Phase Kickoff. Review to be planned early"}

I'm trying filter ng-repeat with Area and Project Status values. However it filters only based on Area. Could you someone help to identify the problem?

Cascade filters? project in jsonObj.Projects | filter:projectArea:true | filter:ProjectStatus — Johannes Jander
– Johannes Jander, Commented Jan 5, 2016 at 13:08
You can also pass the object to filter: arrayOfObjects | filter:{Area: xxx, ProjectStatus: kkk} — maurycy
– maurycy, Commented Jan 5, 2016 at 13:11
@JohannesJander its working thank you. Please write it as answer, so that i can accept it. — Ram
– Ram, Commented Jan 5, 2016 at 13:13
@Ram great :) I have made the comment into an answer with a link, so please accept it. — Johannes Jander
– Johannes Jander, Commented Jan 5, 2016 at 13:17

Johannes Jander · Accepted Answer · 2016-01-05 13:16:56Z

1

You can chain filters:

 project in jsonObj.Projects | filter:projectArea:true | filter:ProjectStatus

answered Jan 5, 2016 at 13:16

Johannes Jander

5,0202 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bas Slagter · Accepted Answer · 2016-01-05 13:22:21Z

0

Two options:

Use multiple filters where one filter uses the result of the previous filter (chaining)

ng-repeat="project in projects | myFirstFilter | mySecondFilter"
Pass on the data or object you want to add to the equation to the filter.

ng-repeat="project in projects | myFirstFilter:myData"

I'd go with the first option because it creates a clear separation of what each filter does. Makes it easier to test as well.

edited Jan 5, 2016 at 13:22

answered Jan 5, 2016 at 13:17

Bas Slagter

9,9479 gold badges50 silver badges81 bronze badges

1 Comment

maurycy Over a year ago

Why the first option if I may ask?

Collectives™ on Stack Overflow

Angularjs ng-repeat filter property with more than one variable?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related