角NG風格有超過2個有條件的輸出

條件1：顏色應該是綠色

條件2：顏色應爲藍色

condition3：顏色應變爲紅色

因此，相同樣式（顏色）有3個輸出。

我可以想出以下表達式：

<p ng-style="condition1 ? { color:'green' } : { color: 'blue' }">

有一種方法來改變上面的代碼，使得其可以容納所有的3個條件，並輸出？

編輯：有一些解決方法來實現這個使用控制器;但我想知道這是否可以在HTML本身完成

來源

2017-05-19 Saurabh Verma

如何在控制器中的函數來計算，對嗎？ – tanmay

是的，有解決方法來實現這個使用控制器;但我想知道這是否只能在html中完成.. –

只有在任何條件爲真時才應用顏色，並使用?:運算符來檢查其他條件爲假值。如果沒有任何條件是真的，則不要使用樣式。

var app = angular.module("MyApp", []).controller("MyCtrl", function ($scope) { 
 
    $scope.cond1 = false; 
 
    $scope.cond2 = false; 
 
    $scope.cond3 = true; 
 
});

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

 
<body ng-app="MyApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <p ng-style="cond1 ? { color:'green' } : cond2 ? {color: 'blue'} : cond3 ? {color: 'red'} : {color: ''}">Hello World!</p> 
 
    </div> 
 

 
</body>

來源

2017-05-19 06:29:50 Sajal

角NG風格有超過2個有條件的輸出

回答

相關問題