更改AngularJs中ng repeat内数组中特定元素的样式

Question

E.g我有一个类似$scope.array = [{text:'abc'}, {text:'pqr'}, {text:'xyz'}];的文本数组现在，与ng-repeat一起，我想更改数组中任何特定元素的文本颜色。如何实现？

Answer 1

IMO，我们有多种选择来实现这一点。

如果你想更改单个属性，那么你可以使用ng-style，但如果你想操作多个属性，那么最好使用ng-class。

ng样式

ngStyle指令允许您有条件地在HTML元素上设置CSS样式。

<div ng-repeat="contact in jsonContacts">
    <span ng-style="{'color':($first ?'red':'blue')}">{{data.row}}</span>
</div>

ng类

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式，在HTML元素上动态设置CSS类。

<div ng-repeat="i in array" ng-class="{'green': $last, 'blue': $first}">
    {{i.text}}
</div>

FYI，

ngRepeat指令为集合中的每个项实例化一个模板。每个模板实例都有自己的作用域，其中给定的循环变量设置为当前集合项，$index设置为项索引或键。

如果重复的元素是迭代器中的第一个，则$first布尔值为true。

如果重复的元素位于迭代器中的第一个和最后一个之间，则$middle布尔值为true。

如果重复的元素是迭代器中的最后一个，则$last布尔值为true。

官方文件

ng重复

ngClass

ngStyle

希望这能帮助你：(

var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
  $scope.array = [{text:'abc'}, {text:'pqr'}, {text:'xyz'}];
});

.green
{
  color: green;
}
.blue
{
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <h3>ng-style used</h3>
    
    <div ng-repeat="i in array" ng-style="{'color':($first ?'red':'blue')}">{{i.text}}</div>
    
    <br/>
    <h3>ng-class used</h3>
  <div ng-repeat="i in array" ng-class="{'green': $last, 'blue': $first}">{{i.text}}</div>
  </div>
  
  </div>
</div>

Answer 2

您可以通过使用ngClass或ngStyle等指令将类或样式更改有条件地应用于某些HTML元素来实现这一点。

假设您正在列出$scope.array元素：

<ul>
    <li ng-repeat="element in array">{{element.text}}</li>
</ul>

如果是text === 'pqr'，您可以向元素添加一个名为.red的类(它会将文本颜色更改为红色(，但将上面的示例更改为：

<ul>
    <li ng-repeat="element in array" ng-class="{'red': element.text === 'pqr'}">{{element.text}}</li>
</ul>

类似地，您也可以使用指令ng-style来直接应用样式，从而避免新的类。由于您使用的是ngRepeat，您还可以使用它的迭代器$index在更高级的情况下应用类/样式，例如第一个/最后一个元素、元素索引是奇数/偶数等

有关更多示例和说明，请查看两项指令的官方文件：

• https://docs.angularjs.org/api/ng/directive/ngClass
• https://docs.angularjs.org/api/ng/directive/ngStyle

Answer 3

您可以使用ng-class或ng-style，甚至在控制器中包括一个辅助function来计算该样式。

<div ng-repeat="item in array" ng-class="calculateClass(item)" ng-style="calculateStyle(item)">
    <!-- more stuff -->
</div>

编辑

对于您的情况，它可能是有用的，这取决于您想要应用什么逻辑来做类似的事情

$scope.calculateStyle = function(item){
    var color;
    // Some logic to define color
    return {
        'color': color
    }
}