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

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

Answer 1

它应该看起来像这样。

<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> 

1. 请记住，使用您的别名vm（controllerAs）
2. 使用track by与ng-repeat获得更好的性能。
3. 我认为应该ng-repeat已放置在li

她是一个工作jsfiddlehttp://jsfiddle.net/irhabi/nh4ddemr/

Answer 2

您正在使用controllerAs语法，所以你必须在你的NG-重复使用vm.arr。此外，您应该使用列表项目中的ng-repeat：

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