ng-classに複数の条件を入れる方法

Question

商品情報が表示されているとします。私は価格が50未満の場合は、アイテムの色が赤でなければなりません。価格が50以上の場合、アイテムの色は黄色でなければならず、価格が50以上（50×60/100）以上であればアイテムの色は緑色になります。今私はそれが最良の方法で達成できるか教えてください。それを完了するための最善のアプローチで私を導く。

このように私は試みましたが、ng-repeatで作業すると汚れたチェックのために繰り返しが繰り返されることを知りました。私のコードを見て、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にelse if条件を複数入れることはできますか？

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

私が最も一般的に、このディレクティブを使用する方法は、ブール$スコープ変数に自分のCSSクラスを設定することであるng-classを使用するには、いくつかの異なる方法があります...のようなもの：

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

あなたは、コントローラ内の関数を呼び出してオブジェクトを渡すためにNG-クラスを設定することができます。

例：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'; 
    } 
    } 
}