Question

假设我的一个键的值为绿色/红色，我想在其值为绿色时显示引导btn-success，在其红色时显示btn-danger。

Answer 1

我认为您正在寻找ng-class。您可以使用以下synthax：

<p ng-class="condition ? 'classIfTrue' : 'classIfFalse'">Foo</p>

在你的情况下，它会是这样的：

<p ng-class="myVariable ? 'btn-success' : 'btn-danger'">Foo</p>

由于您没有提供代码示例，以下是它如何使用示例：

＆＃13;

angular.module('app', []).controller('MyCtrl', function() {
    this.valueSuccess = false;
    this.valueDanger = true;
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="app">
  <div ng-controller="MyCtrl as vm">
    <p ng-class="vm.valueSuccess ? 'danger' : 'success'"> {{vm.valueSuccess}}</p>
    <p ng-class="vm.valueDanger ? 'danger' : 'success'">{{vm.valueDanger}}</p>
  </div>
</section>

＆＃13;

Answer 2

您需要更新ng-class

<div ng:controller="CartForm">
  <ul>
    <li ng-repeat='country in countries'><a class="btn" ng-class="{'btn-primary': country.color == 'green', 'btn-danger': country.color == 'red'}" href="">{{country.name}} - {{country.population}}</a></li>
  </ul>
</div>

并删除appliedClass功能

工作jsFiddle

如何根据JSON数据值更改我的CSS？

2 个答案: