Question

我在这里有一个模板，我想根据我的$ scope.dataset重复一下。如何让ng-repeat为每个名称重复此模板？

HTML
我的模板如下

 <table>
   <tr ng-repeat = "data in dataset">
     <td>{{data.name}}</td>
     <td> 
        <div class="progressbar {{data.color}}" ng-style="{width:{{data.width}} + '%'}"
           value = "{{data.value}}">
          <span id="barValue">{{data.value}}</span>
        </div>
     </td>
   </tr>
 </table>

正如您所看到的，我试图在表格中重复此模板。

数据集如下

 $scope.dataset=[
          {'name':'name1', 'value':34, 'width':34, 'color':'colorRed'},
          {'name':'name2', 'value':50, 'width':50, 'color':'colorBlue'},
          {'name':'name3', 'value':47, 'width':47, 'color':'colorRed'},
          {'name':'name4', 'value':82, 'width':82, 'color':'colorBlue'},
          {'name':'name5', 'value':72, 'width':72, 'color':'colorOrange'},
          {'name':'name6', 'value':17, 'width':17, 'color':'colorGreen'},
          {'name':'name7', 'value':20, 'width':20, 'color':'colorRed'},
        ]

当我尝试使用它时，没有任何东西弹出。我想要的只是为每个出现的.name显示数据。
所以第一个问题是我做错了什么？

其次，是否可以在自定义指令中完成所有这些操作？

Answer 1

您在使用时必须在控制台中出现$parse错误 {{}}
中的ng-style

您不应在{{}}指令内使用ng-style插值指令。

颜色应该应用为样式而不是添加类，您可以从ng-style指令应用。

<强> HTML

<div class="progressbar" ng-style="{width:data.width + '%', color: data.color}"
      value = "{{data.value}}">
     <span id="barValue">{{data.value}}</span>
</div>

用ng-repeat重复模板

1 个答案: