Question

我在AngularJS上遇到了一些问题。我的控制器mainCtrl有这个变量：

this.colors = {Sam:blue,Jane:red,Tom:pink};
this.arr = [{person:'Sam',story:'some story'},{name:'Tom',story:'some story2'}]

我得到了这段代码：

<div ng-controller="mainCtrl as vm">
<ul ng-repeat="obj in arr">
<li ng-style={color:vm.color[obj.person]}>{{obj.story}}</li>
</ul>
</div>

我希望li会被着色，例如颜色字典中的人的颜色。我该怎么处理？我每次都没有定义，但是当我明确表达它的工作时，例如：

<li ng-style={color:vm.color['Sam']}>{{obj.story}}</li>

Answer 1

您正在使用controllerAs-Syntax，因此您必须在ng-repeat中使用vm.arr。此外，您应该在列表项上使用ng-repeat：

<ul>
  <li ng-repeat="obj in vm.arr" ng-style="{color:vm.color[obj.person]}">{{obj.story}}</li>
</ul>

Answer 2

看起来应该是这样的。

<div ng-controller="mainCtrl as vm">
   <ul>
       <li ng-repeat="obj in vm.arr track by $index" 
           ng-style="{'color':vm.colors[obj.person]}"
           ng-bind="obj.story">
       </li>
   </ul>
</div>

请记住使用您的别名vm（controllerAs）
将track by与ng-repeat一起使用可获得更好的效果。
我认为ng-repeat应放在li

她的工作jsfiddle http://jsfiddle.net/irhabi/nh4ddemr/

从ng-repeat ng-style访问范围内的变量

2 个答案: