更改角度数组中的文本颜色

时间:2017-03-20 14:26:44

标签: angularjs arrays angularjs-ng-repeat

我们有一些嵌套数据显示在表格中。

其中一个表格单元格是数组的内容,使用此问题的答案Using comma as list separator with AngularJS

将其转换为单个字符串

我们有一个请求是基于数组的元素着色。该数组将类似于:

[{name: "bob", color: red}, {name: "alice", color: green}]

然而,我似乎无法找到一种方法将颜色应用于文本作为ng-repeat的一部分。

我知道一个选项是预处理数组并用元素替换名称

1 个答案:

答案 0 :(得分:5)

应用颜色的最简单方法是使用ng-style:

var app = angular.module("app", []);

app.controller("myController", myController)

function myController() {
  this.data = [{ name: "Bob", color: "red" }, { name: "Alice", color: "green"}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="myController as ctrl">
    <ul>
      <li ng-repeat="person in ctrl.data" ng-style="{ color: person.color }">{{person.name}}</li>
    </ul>
  </div>
</div>