Question

我有以下代码

<div ng-repeat="cat in filteredTodos">
   <input class='inputIsActive' type="checkbox" ng-checked="{{cat.isActive}}"/>
   <span>{{cat.isActive}}</span>
</div>

isActive可以有true或false值。如何根据<span>值设置isActive字体颜色？

Answer 1

您可以使用ng-class：

＆＃13;

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.filteredTodos = [{
    isActive: true
  }, {
    isActive: false
  }];
}

＆＃13;

.active {
  color: green;
}
.inactive {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="cat in filteredTodos">
    <input class='inputIsActive' type="checkbox" ng-checked="{{cat.isActive}}" />
    <span ng-class="{ active: cat.isActive, inactive: !cat.isActive }">{{cat.isActive}}</span>
  </div>
</div>

＆＃13;

或使用ng-style：

＆＃13;

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.filteredTodos = [{
    isActive: true
  }, {
    isActive: false
  }];
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="cat in filteredTodos">
    <input class='inputIsActive' type="checkbox" ng-checked="{{cat.isActive}}" />
    <span ng-style="{color: cat.isActive ? 'green' : 'red'}">{{cat.isActive}}</span>
  </div>
</div>

＆＃13;

修改

使用ng-model代替ng-checked：

＆＃13;

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.filteredTodos = [{
    isActive: true
  }, {
    isActive: false
  }];
}

＆＃13;

.active {
  color: green;
}
.inactive {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="cat in filteredTodos">
    <input class='inputIsActive' type="checkbox" ng-model="cat.isActive" />
    <span ng-class="{ active: cat.isActive, inactive: !cat.isActive }">{{cat.isActive}}</span>
  </div>
</div>

＆＃13;

Answer 2

<span style="color: {{cat.isActive? 'green' : 'red'}}">blue</span> eyes.</p>

这可能有用

Answer 3

您可以使用ng-class或ng-style

<span ng-class="{'active' : cat.isActive , 'not-active' : !cat.isActive}">{{cat.isActive}}</span>

 .active { 
     color:green;
 }

.not-active { 
     color:red;
 }

<span ng-style="{color: (cat.isActive ? 'green' : 'red' )}">{{cat.isActive}}</span>

这是工作plunker

AngularJS ng-repeat设置字体颜色

3 个答案:

修改