Question

我有ng-repeat使用这样的过滤器：

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

我想让客户能够过滤它，所以我已经将过滤器分配给这样的变量：

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

代码#1正在运作，但代码#2却没有，我不确定原因。

Answer 1

您是否也尝试包装ng-init

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

然而，正如我在之前的评论中所述 - angularjs documentation指出，在大多数情况下使用ngInit是一种不好的做法。如果可能的话，这不应该是解决问题的方法。

您的＃2代码确实有效，请检查此插件 - 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}
    ];

Answer 2

使用ng-init is not a good way to go with（如您所见，角度文档已添加红色警告文字）。如您所知，它仅在初始渲染时进行评估（因为ng-init在preLink阶段评估其表达式）。

通过查看代码，似乎reportFilter变量将成为所有contests的公共对象。如果我错了，请纠正我？

我只在控制器中添加一个这样的值，如下所示。

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

直接在视图上使用。

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

Answer 3

更好的方法是在ng-repeat读取jsonArray中的项目之前保存将变量应用于变量中的json数据的结果。

<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>

Answer 4

代码2无效，因为您只需初始化div而不创建过滤器时必须创建自定义过滤器

代码1正在运行，因为您使用了正确的默认过滤器语法，可以像对待任何对象一样进行比较

为Angular JS

4 个答案: