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.

Answer 1

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}
    ];