angularjs - 在 AngularJs 中更改 ng-repeat 中数组的特定元素的样式

Question

例如我有一个文本数组，例如 $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 指令允许您通过数据绑定(bind)表示要添加的所有类的表达式来在 HTML 元素上动态设置 CSS 类。

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

仅供引用，

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

$first boolean 如果重复元素在迭代器中是第一个，则为 true。

$middle boolean 如果重复元素在迭代器的第一个和最后一个之间，则为 true。

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

官方文件

ngRepeat

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>