我正在尝试做这样的事情:
<ul>
<li ng-repeat="{{myRepeatExpression}}">{{row.name}}</li>
</ul>
但是因为ng-repeat
逻辑处于指令的编译状态,所以它将 视为{{myRepeatExpression}}
普通字符串而不是变量。这显然是行不通的。
有什么解决方法吗?
我正在尝试做这样的事情:
<ul>
<li ng-repeat="{{myRepeatExpression}}">{{row.name}}</li>
</ul>
但是因为ng-repeat
逻辑处于指令的编译状态,所以它将 视为{{myRepeatExpression}}
普通字符串而不是变量。这显然是行不通的。
有什么解决方法吗?
你只能使用 and 表达ng-repeat
而不是一个interpolated
值。现在为了创建一个动态的可重复列表,您可以尝试:
ng-repeat
-这可能会更昂贵,因为 Angular 需要先调用该函数,然后确定在执行$digest
循环时集合是否已更改$watch
对于触发列表更改的范围内的特定变量 -可能更有效,但如果您的动态列表依赖于多个变量,它可能会变得更加冗长,并且可能导致潜在的错误,$watch
因为在新变量时忘记添加新变量是必须的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>
ng-repeat
只接受它的专有表达式语法row in rows
,但rows
可以是控制器中的函数或承诺。但是,您需要密切关注性能,因为 ng-repeat 不能很好地处理经常变化的事物(可怕的最大 10 次迭代错误)。
您不能将 ng-repeat 与应该直接表示表达式的字符串/变量一起使用,但您可以创建插值/解析该值并将其传递给 ng-repeat 参数并重新编译元素的指令。
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 中引起麻烦。