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

Question

例如,我有一个类似于$scope.array = [{text:'abc'}, {text:'pqr'}, {text:'xyz'}]; Now 的文本数组,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>

纳克级

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态设置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>