How to use "ng-repeat" within template of a directive in Angular JS?
56,342
Passing an entire object with attribute will not work, you have to use dual way binding. Just change binding from @
to =
and modify the HTML below to make it work:
changes to directive code:
// ...
scope: {
listcolumns: "="
},
// ...
changes to template:
<div linkedlist listcolumns="cashAccountsColumns"></div>
Author by
Admin
Updated on July 23, 2022Comments
-
Admin almost 2 years
I'm new to Angular JS and I am trying to create a custom directive that will be used as below:
<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>
Corrps. controller will be:
$scope.cashAccountsColumns = [ {"field": "description", "title": "Description"}, {"field": "owner", "title":"Owner"}, {"field": "currentBalance", "title":"Current Balance" } ];
And the directive code is:
return { restrict : 'EA', transclude : false, templateUrl : 'html/linkedlist.html', scope: { listcolumns: "@" }, link : function(scope, element, attrs) { } }
template is:
<table class="box-table" width="100%"> <thead> <tr> <th scope="col" ng-repeat="column in listcolumns"> {{column.title}} </th> </tr> </thead> </table>
But this is not working. I'm not getting the value of column.title on screen instead too many rows as below are added to DOM:
<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>
-
sar over 9 yearsThanks @Ajay saved a day !!