angularjs – 如何在Angular JS中的指令的模板中使用“ng-repeat”?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在Angular JS中的指令的模板中使用“ng-repeat”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是新的Angular JS和我试图创建一个自定义指令,将使用如下:

< div linkedlist listcolumns =“{{cashAccountsColumns}}”>< / div>

Corrps。控制器将:

$scope.cashAccountsColumns = [
  {"field": "description","title": "Description"},{"field": "owner","title":"Owner"},{"field": "currentBalance","title":"Current Balance" }
];@H_403_6@ 
 

指令代码是:

return {
      restrict : 'EA',transclude : false,templateUrl : 'html/linkedlist.html',scope: {
         listcolumns: "@"
      },link : function(scope,element,attrs) {
      }
}@H_403_6@ 
 

模板是:

<table class="Box-table" width="100%">
  <thead>
    <tr>
      <th scope="col" ng-repeat="column in listcolumns">
        {{column.title}}
      </th>
    </tr>
  </thead>
</table>@H_403_6@ 
 

但这不工作。我没有得到column.title的值在屏幕上,太多的行如下被添加到DOM:

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>@H_403_6@
传递具有属性的整个对象将不起作用,您必须使用双向绑定。只需将绑定从@更改为=,并修改下面的HTML使其工作:

更改指令代码

// ...
scope: {
    listcolumns: "="
},// ...@H_403_6@ 
 

对模板的更改:

<div linkedlist listcolumns="cashAccountsColumns"></div>@H_403_6@
原文链接:https://www.f2er.com/angularjs/146623.html

猜你在找的Angularjs相关文章