I'm trying to do something like this:
<ul>
<li ng-repeat="{{myRepeatExpression}}">{{row.name}}</li>
</ul>
But because the ng-repeat
logic is in the compile state of the directive it treats the {{myRepeatExpression}}
as a normal string instead of a variable. Which doesn't work, obviously.
Is there any workaround for that?
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
Definition and Usage. The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
Directives that Create Scopes In most cases, directives and scopes interact but do not create new instances of scope. However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.
You can only use and expression with ng-repeat
and not an interpolated
value.
Now in order to create a dynamic repeatable list you can try either:
ng-repeat
- this is potentially more expensive since angular needs to call the function first then determine if the collection has changed when doing a $digest
cycle
$watch
for a particular variable on the scope that trigger a change of the list - potentially more efficient but if your dynamic list depends on more than one variable it can get more verbose and can lead to potential bugs from forgetting to add a new $watch
when a new variable is required
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With