从 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，因此您必须在 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

她在工作jsfiddlehttp://jsfiddle.net/irhabi/nh4ddemr/

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

access variable in scope from ng-repeat ng-style

angularjs

ng-repeat

ng-style