angularjs - 从 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 将被着色，例如颜色字典中人的颜色。我该如何处理？我每次都不确定，但是当我明确地这样做时，它的工作，例如：

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

Answer 1

您正在使用 controllerAs-Syntax，因此您必须vm.arr在 ng-repeat 中使用。此外，您应该在列表项上使用 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>

1. 请记住使用您的别名vm(controllerAs)
2. 使用track bywith 以ng-repeat获得更好的性能。
3. 我认为ng-repeat应该放在li

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