Как установить несколько условий в ng-классе

Question

Предположим, я показываю информацию о продукте. я хочу, если цена меньше 50, а цвет элемента должен быть красным. если цена более 50, то цвет товара должен быть желтым, а если цена больше (50+ (50 * 60/100)), тогда цвет элемента должен быть зеленым. теперь скажите мне, как я могу достичь этого наилучшим образом. направляйте меня с наилучшим подходом к его завершению.

таким образом я попытался, но я узнал, что будет больше итераций из-за грязной проверки при работе с ng-repeat. см. мой код и расскажите, как я могу добавить несколько состояний в ng-классе для динамического определения класса.

<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, 
    } 
    ] 
}) 

скажите мне без вызова функции из нг-класса, как я мог поместить несколько, если другое условие в нг-классе?

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