Assigning a filter to an object variable in Angular JS

Question

I have an ng-repeat using a filter like this:

#1
<div class="contestReports" ng-repeat="contest in contests | filter:{votingOver:true}">
    <contestreport></contestreport>
</div>

I want to allow the customer to be able to filter it so I have assigned the filter to a variable like this:

#2
<div ng-init="reportFilter = {votingOver:true}"></div>
<div class="contestReports" ng-repeat="contest in contests | filter:reportFilter">
    <contestreport></contestreport>
</div>

Code #1 is working but Code #2 is not and I'm not sure why.

Please have a look at this plnkr.co/edit/nFFHmUA7RdxMIPV9VUDC?p=preview — Navoneel Talukdar
– Navoneel Talukdar, Commented Feb 18, 2016 at 7:35
in general ngInit is not a good practice to use anyway - docs.angularjs.org/api/ng/directive/ngInit, or it's more of a theoretical question for you? — shershen
– shershen, Commented Feb 20, 2016 at 19:56
@Jordash don't you interested in give a bounty? Have you checked answers? — Pankaj Parkar
– Pankaj Parkar, Commented Feb 28, 2016 at 16:31

shershen · Accepted Answer · 2016-02-28 19:17:04Z

3

+25

Did you also try to wrap ng-init

<div ng-init="(reportFilter = '{votingOver:true}')"></div>

However, as I've stated in my comment earlier - angularjs documentation states that using ngInit is a bad practice in mostly all cases. So that should not be a solution to your problem if possible.

And your #2 code actually works, please check this plunk - http://plnkr.co/edit/dBDyYPd3ZoUVdXngu52t?p=preview

//html
  <div ng-init="reportFilter = {votingOver:false}"></div>
<div class="contestReports" ng-repeat="contest in contests | filter:reportFilter">
  {{contest | json}}
</div>

  </div>

//js in controller
  $scope.contests = [
    {id:1, title:'1', votingOver:false},
    {id:2, title:'2', votingOver:true},
    {id:3, title:'3', votingOver:true}
    ];

edited Feb 28, 2016 at 19:17

answered Feb 20, 2016 at 19:58

shershen

10k11 gold badges44 silver badges62 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2016-02-27 19:55:40Z

2

Using ng-init is not a good way to go with(as you can see angular docs has added warning text in red). As you know it is going to evaluate on initial rendering only(as ng-init evaluates its expression in preLink phase).

By looking at your code, it seems like reportFilter variable is going to be an common object for all contests. Correct me if I'm wrong?

I'd add this value inside a controller only once like below.

//place this inside your controller
$scope.reportFilter = { votingOver : true };

And use directly on view itself.

<div class="contestReports" ng-repeat="contest in contests | filter:reportFilter">
    <contestreport></contestreport>
</div>

edited Feb 27, 2016 at 19:55

answered Feb 20, 2016 at 20:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Shalabh Raizada · Accepted Answer · 2016-02-24 09:47:26Z

1

Better way is to save the result of applying filter to the json data in a variable before ng-repeat reads items in the jsonArray like below.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-init="contests=
        [{name:'bad apple', votingOver:false},
         {name:'pleasurebuilder', votingOver:true},
        {votingOver:true}]">
  </div>
  <div ng-init="reportFilter = {votingOver:true}">
  </div>
  <div ng-repeat="contest in revoluza = (contests | filter: reportFilter)">
    {{contest}}
  </div>
  <hr>
</div>

answered Feb 24, 2016 at 9:47

Shalabh Raizada

3643 silver badges8 bronze badges

Comments

Hassan Tariq · Accepted Answer · 2016-02-25 12:07:36Z

1

Code 2 is not working because you have to create custom filter while you are only intializing div not creating filter

Code 1 is working because you are using proper syntax for default filter that can be compared with any object just like you did

answered Feb 25, 2016 at 12:07

Hassan Tariq

7407 silver badges15 bronze badges

Collectives™ on Stack Overflow

Assigning a filter to an object variable in Angular JS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related