如何在ng級中設置多個條件

Question

假設我顯示產品信息。我想如果價格低於50，那麼項目顏色應該是紅色。如果價格超過50，則物品顏色應爲黃色，如果價格超過（50+（50 * 60/100）），則物品顏色應爲綠色。現在告訴我，我怎麼能達到最好的方式。用最好的方法指導我完成它。

這種方式我嘗試過，但我知道會有更多的迭代由於骯髒的檢查工作與ng重複。看到我的代碼，並告訴我怎麼可以在ng-class中設置多個條件來動態設置類。

<div ng-app="myApp"> 
    <ul ng-controller="MyController"> 
    <li ng-class="setColor(item.price)" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li> 
    </ul> 
</div> 


var myApp = angular.module('myApp', []); 

myApp.controller('MyController', function MyController($scope) { 

$scope.setColor = function(price) { 

    alert(price); 
} 

    $scope.products = [ 
    { 
     'name' : 'Xbox', 
     'clearance' : true, 
     'price' : 30.99, 
    }, 
    { 
     'name' : 'Xbox 360', 
     'clearance' : false, 
     'salesStatus' : 'old', 
     'price' : 99.99, 
    }, 
    { 
     'name' : 'Xbox One', 
     'salesStatus' : 'new', 
     'price' : 50, 
    }, 
    { 
     'name' : 'PS2', 
     'clearance' : true, 
     'price' : 79.99, 
    }, 
    { 
     'name' : 'PS3', 
     'salesStatus' : 'old', 
     'price' : 99.99, 
    }, 
    { 
     'name' : 'PS4', 
     'salesStatus' : 'new', 
     'price' : 20.99, 
    } 
    ] 
}) 

告訴我沒有從ng-class調用函數我怎麼能在ng-class中放置多個if else條件？

if price > 50 
    return "css-class-yello" 
else if price < 50 
    return "css-class-red" 
else if price > (50+(50*60/100)) 
    return "css-class-green" 

如果可能請用代碼引導我。感謝

Answer 1

嘗試這樣的。

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

 
app.controller("ctrl" , function($scope){ 
 
    
 
    $scope.products = [{ 
 
    'name': 'Xbox', 
 
    'clearance': true, 
 
    'price': 30.99, 
 
    }, { 
 
    'name': 'Xbox 360', 
 
    'clearance': false, 
 
    'salesStatus': 'old', 
 
    'price': 99.99, 
 
    }, { 
 
    'name': 'Xbox One', 
 
    'salesStatus': 'new', 
 
    'price': 50, 
 
    }, { 
 
    'name': 'PS2', 
 
    'clearance': true, 
 
    'price': 79.99, 
 
    }, { 
 
    'name': 'PS3', 
 
    'salesStatus': 'old', 
 
    'price': 99.99, 
 
    }, { 
 
    'name': 'PS4', 
 
    'salesStatus': 'new', 
 
    'price': 20.99, 
 
    }]; 
 
    });

.css-class-yellow{ 
 
    background-color: yellow; 
 
    } 
 
.css-class-red{ 
 
    background-color: red; 
 
    } 
 
.css-class-green{ 
 
    background-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"> 
 

 
    <ul class="nav nav-pills" ng-init="catVal = 1"> 
 
     <li ng-repeat="item in products" ng-class="{'css-class-yellow' : item.price > 50,'css-class-red' : item.price <50, 'css-class-green' : item.price > 50+50*60/100}"> 
 
      <a href="">{{item.name}}</a> 
 
     </li> 
 
         
 
    </ul>   
 
</div>

Answer 2

有兩種使用ng-class我最常使用此指令的方式幾種不同的方式是通過你的CSS類設置爲一個布爾值$範圍變量...是這樣的：

HTML：

ng-class="{your-css-class:$scope.myVariable}" 

角控制器：

//to add class 
$scope.myVariable = true 

//to remove class 
$scope.myVariable = false 

要使用多類只需用逗號它們分開喜歡的東西：

ng-class="{your-css-class:$scope.myVariable, my-other-class:$scope.myOtherVariable}" 

小提琴here

Answer 3

您可以設置納克級中調用控制器的功能和傳遞對象。

例子：https://jsfiddle.net/5hgLshhz/

<ul> 
    <li ng-repeat="p in ctrl.products" ng-class="ctrl.setClass(p)">{{p.name}}</li> 
</ul> 


function Controller() { 
    var vm = this; 

    vm.products = [{ 
    'name': 'Xbox', 
    'clearance': true, 
    'price': 30.99, 
    }, { 
    'name': 'Xbox 360', 
    'clearance': false, 
    'salesStatus': 'old', 
    'price': 99.99, 
    }, { 
    'name': 'Xbox One', 
    'salesStatus': 'new', 
    'price': 50, 
    }, { 
    'name': 'PS2', 
    'clearance': true, 
    'price': 79.99, 
    }, { 
    'name': 'PS3', 
    'salesStatus': 'old', 
    'price': 99.99, 
    }, { 
    'name': 'PS4', 
    'salesStatus': 'new', 
    'price': 20.99, 
    }]; 

    vm.setClass = setClass; 

    function setClass(p) { 
    if (p.price > 50) { 
     return 'css-class-yellow'; 
    } 

    if (p.price < 50) { 
     return 'css-class-red'; 
    } 

    if (p.price > (50 + (50 * 60/100))) { 
     return 'css-class-green'; 
    } 
    } 
}