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