ngスタイルのディレクティブで複数の条件に基づいて複数のスタイルを適用するにはどうすればよいですか？

Question

アングルでは、異なる条件に基づいて異なるスタイル属性を適用する必要がありますが、このようには動作しません。条件付きの条件を2つ適用することしかできません。

<div ng-style=" 
    (status=="up") ?{'background-color':'green' ,'color':'green'} 
    (status=="down")?{'background-color':'red' ,'color':'red'} 
    (status=="idle")?{'background-color':'yellow','color':'yellow'} 
    (status=="") ?{'background-color':'grey' ,'color':'grey'} 
"> 

あなたが変なふうに動作していない怒鳴るようngのスタイルのスタイルOBJを返す関数に属性を渡すためにどのような方法を知っていれば、それは良いだろう！

$scope.styleFn(status,attr) { 
     (status=="up") ?{attr:'green'} 
     (status=="down")?{attr:'red'} 
     (status=="idle")?{attr:'yellow'} 
     (status=="") ?{attr:'grey'} 
} 

<div ng-style="styleFn('up','background-color')"> 

Answer 1

はい、より複雑な条件を指定するために関数を使用できます。

var style = { 
    'up': {'background-color':'green' ,'color':'green'}, 
    'down': {'background-color':'red' ,'color':'red'}, 
    'idle': {'background-color':'yellow' ,'color':'yellow'}, 
    'default': {'background-color':'grey' ,'color':'grey'} 
} 

$scope.applyStyle = function(status) { 
    //the status is the key to get the target style 
    return status ? style[status] : style['default']; 
)}; 

、テンプレート

<div ng-style="applyStyle(status)"></div> 

Answer 2

はあなたにもNG-クラスを使用することができます。

右ザッツ

function DemoCtrl($scope) { 
 
    $scope.status = 'up' 
 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app> 
 
    
 
    <table ng-controller="DemoCtrl"> 
 
     <tr ng-class="{'green': status == 'up','red':status== 'down' ,'yellow': status== 'idle' } "> 
 
      <td style="color:white;">Your status is {{status}}</td> 
 
     </tr> 
 
    </table> 
 
</div>