Question

我想参数改变我的td的颜色，所以我试试这个并且它工作正常： {{item.name}}

但是当我尝试使用不同的条件时，例如

item.name：xxx =＆gt; color：red

item.name：yyy =＆gt;颜色：黄色

item.name：aaa =＆gt;颜色：蓝色

Answer 1

试试这个。

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.items = [{"name":"ali"},{"name":"reza"},{"name":"amir"}];
  
  
  $scope.getStyle = function(name){
    if(name == "ali")
      return {'color':'red'};
    if(name == "reza")
      return {'color':'blue'};
    if(name == "amir")
      return {'color':'green'};
    }
  
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
  
  <div ng-repeat="item in items">
      <p ng-style ="getStyle(item.name)">{{item.name}}</p>
    </div>
            
</div>

Answer 2

由于您没有发布足够的代码，我无法给您一个确切的答案，但看看是否有帮助：

<div ng-if="item.name == xxx"><div ng-style="{'background-color': yourColor}"></div>

＆＃34; yourColor＆＃34;可以是直接的颜色名称，如＆＃34; red＆＃34;或范围变量。

如果你的颜色在下面这样的类中，你也可以使用ng-class：

<div ng-class="{'myColor1': item.name == xxx, 'myColor2': item.name == yyy, 'myColor3': item.name == zzz}"></div>

希望这有帮助！

Answer 3

你可以有条件地申请课程：

<td ng-class="{red: item.name === 'xxx', yellow: item.name === 'yyy'}">
    {{ item.name }}
</td>

然后使用CSS设置颜色：

td.red { background-color: red; }
td.yellow { background-color: yellow; }

Answer 4

CSS：

.item-color1 {
 background-color: red;
 }
.item-color2 {
 background-color: yellow;
 }

 .item-color3 {
 background-color: blue;
 }

in html

<td ng-class="{item-color1: item.name == xxx , item-color2: item.name == yyy, item-color3: item.name == aaa}">

Answer 5

## controllerjs ##

 var app = angular.module("app",[]);

    app.controller("ctrl" , function($scope){
  $scope.Unresolved = [{"status":"Assigned"},{"status":"Unassigned"},{"status":"CustomerWait"}];
  $scope.getStyle = function(status){
    console.log('color============>>>>>>>>>',status);
      if(status == "Unassigned")
        return {'background-color':'#d9534f'};
      if(status == "Assigned")
        return {'background-color':'#337ab7'};
      if(status == "CustomerWait")
        return {'background-color':'green'};
   });

       })

玉

script(src='js/angularjs/angular.js')(you using version)
tr(ng-repeat='unresolved in unresolveds track by $index')
  td
    select.colorSel(ng-model='unresolved.status',ng-style='getStyle(unresolved.status)')
      option(value='Assigned',) Assigned
      option(value='Unassigned') Unassigned
      option(value='Customer wait') Customer wait

用ng风格和不同条件改变颜色

5 个答案:

## controllerjs ##

玉