Question

我正在尝试做这样的事情：

<ul>
    <li ng-repeat="{{myRepeatExpression}}">{{row.name}}</li>
</ul>

但是因为ng-repeat逻辑处于指令的编译状态，它将{{myRepeatExpression}}视为普通字符串而不是变量。这显然不起作用。

有没有解决方法？

Answer 1

您只能使用ng-repeat而不是interpolated值来表达。现在，为了创建动态可重复列表，您可以尝试：

使用在ng-repeat - 中动态返回列表的函数，这可能更昂贵，因为角度需要先调用函数然后确定集合在执行$digest时是否已更改周期
$watch表示触发更改列表的范围上的特定变量 - 可能更有效但如果您的动态列表依赖于多个变量，它可能会变得更加冗长并且可能会带来潜力在需要新变量时忘记添加新$watch的错误

Demo plunker

<强> JS：

app.controller('MainCtrl', function($scope) {
  var values1 = [{name:'First'}, {name:'Second'}];
  var values2 = [{name:'Third'}, {name:'Fourth'}, {name:'Fifth'}];

  //1. function way
  $scope.getValues = function(id) {
    if(id === 1) {
      return values1;
    }
    if(id === 2) {
      return values2;
    }
  }

  //2. watch way
  $scope.values = undefined;
  $scope.$watch('id', function(newVal) {
    $scope.values = $scope.getValues(newVal);
  });
});

<强> HTML：

<!-- Here we pass the required value directly to the function -->
<!-- this is not mandatory as you can use other scope variables and/or private variables -->
<ul>
  <li ng-repeat="v in getValues(id)">{{v.name}}</li>
</ul>
<!-- Nothing special here, plain old ng-repeat -->
<ul>
  <li ng-repeat="v in values">{{v.name}}</li>
</ul>

Answer 2

ng-repeat仅接受row in rows中的专有表达式语法，但rows可能是控制器中的函数或承诺。但是你需要仔细观察性能，因为ng-repeat对于经常变化的事情（最可怕的10次迭代错误）不能很好地工作。

Answer 3

您不能将ng-repeat与应该直接表示表达式的字符串/变量一起使用，但您可以创建指令来插入/解析此值并将其传递给ng-repeat参数并重新编译元素。 / p>

app.directive('ngVarRepeat',function($compile){
  return {
    priority:1001, //must be higher than 1000 (priority of ng-repeat)
    compile:function($elm,$attrs){

      var expression = $attrs.ngVarRepeat;
      $elm.removeAttr('ng-var-repeat'); // remove attribute so we can recompile it later

      return function(scope,elm,attrs){
        $elm.attr('ng-repeat',scope.$eval(expression));
        $compile($elm)(scope);
      }
    }
  }
})

看看这个plunker：demo plunker from accepted answer

另请注意，这种方法应该会导致嵌套的ng-repeats出现麻烦。

角度ng-repeat表达式作为变量

3 个答案: