AngularJS ng-repeat + ng-click +动态过滤器

时间:2016-03-03 12:34:49

标签: angularjs filter angularjs-ng-repeat

我是AngularJS的新手,我在这里遇到了这个问题,我想这可能很简单,但我还是不能拍下来

我有一个过滤器garageFilter,他从一个数组中搜索一个数字然后,我创建了一个li标签动态,带有来自我通过输入[type:number]字段创建的Obj []的ng-repeat。

每个li标签应该有一个带有这个garageFilter过滤器的ng-click事件,当我点击这个li标签时,它必须根据过滤器中的项目编号搜索一个元素。 我已经让这个过滤器在视图中与li标签元素配合良好,但是这个过滤器并不像其他我需要的那样动态创建

<li data-ng-click="garageFilter={level:3}">Level 3</li>

为动态li标签我试过这个

<li data-ng-repeat="level in levelNum track by $index" ng-click="garageFilter={level:{{level}}">Level {{level}}</li>

并且html会创建此<li data-ng-repeat="level in levelNum track by $index" ng-click="garageFilter={level:5}" class="ng-binding ng-scope">Level 5</li>

但过滤器不起作用..

谁能帮助我?请 谢谢你们!

1 个答案:

答案 0 :(得分:1)

四处寻找,我的方式正确。正如我读到的那样:

  

问题是因为ng-repeat为每个创建了一个新的范围   迭代。您正在编写迭代范围

所以最好的方法是创建一个函数而不是手动赋值

就我而言:

在应用

 $scope.myGarageFilter = function(value){
      $scope.garageFilter = {level:value};
    }

HTML

 <span ng-repeat="lvl in levelNum">
    <li ng-click="myGarageFilter(lvl.num)">Level {{lvl.num}}</li>
 </span>

而不是:

<li ng-click="garageFilter={level:4}">Level 4</li>