Question

我的控制器中有一系列颜色。我想生成一个表，其中行的背景颜色与颜色中每个元素的背景颜色相同。

我已经编写了CSS来生成颜色。我只想让{{color}}在数组中呈现颜色。

<table>
    <tr ng-repeat="color in colors" class="{{color}}">
        <td>Some dummy text</td>
    </tr>
</table>

我知道如果我们在{{color}}中使用<td>我可以获得相同的结果。但我需要在同一行中使用它。我想知道这是否可能。

感谢您的帮助！

Answer 1

虽然@Claies告诉你关于ng-class的内容是正确的，但是你的代码甚至与class一起工作：

angular.module('sa', []).controller('Foo', function($scope) {
  $scope.colors = ['red', 'green'];
});

.red {
  background-color: red;
}
.green {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="sa" ng-controller="Foo">
  <table>
    <tr ng-repeat="color in colors" class="{{color}}">
      <td>Some dummy text</td>
    </tr>
  </table>
</div>

Answer 2

您可以使用ng-style，它允许您插入内联样式。我在这里创造了一个小提琴：http://jsfiddle.net/jqwf8dpf/4/

HTML：

<table ng-controller="MyCtrl">
    <tr ng-repeat="color in colors" ng-style="{ 'background-color': '{{color}}' }">
        <td>Some dummy text</td>
    </tr>
</table>

代码：

myApp.controller('MyCtrl', function($scope) {
    $scope.colors = ['red', 'green', 'blue'];
});

如何在同一行中使用ng-repeat中使用的变量？

2 个答案: