ng-class 效果不佳,无法验证表达式
ng-class isnt work well, not validate a expression
我的问题是我的项目没有很好地验证 ng-class,即使在开始应用不应该
的 class 时也是如此
var app = angular.module('plunker', ['angular.filter']);
app.controller('MainCtrl', function($scope) {
$scope.colores = [{
"name": "red"
}, {
"name": "blue"
}, {
"name": "pink"
}, {
"name": "green"
}, {
"name": "orange"
}];
$scope.color = [];
$scope.setColors = function(x){
if(x == 1){
$scope.color = ['red', 'blue', 'orange'];
}else{
$scope.color = ['green', 'pink'];
}
console.log($scope.color);
}
$scope.changeColor = function(pColor){
return $.inArray(pColor, $scope.color);
};
});
/* Put your css in here */
.red{background: red;}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="x">
<option value="0">0</option>
<option value="1">1</option>
</select>
<button ng-click="setColors(x)">Change</button>
<div ng-repeat="color in colores | filter: { category: subcategory.category, subcategory: subcategory.subcategory }"><!--Level 3-->
<p ng-class="{ 'red': changeColor( '{{ color.name }}' ) }" class=''>{{ color.name }}</p>
</div>
</body>
</html>
我需要的是每次数组更改时,如果在数组中找到此标签 p 的名称,p 标签会激活或停用红色 class。
我一直在寻找其他问题的解决方案,但 none 已经解决了问题。
我附上项目
ng-class 需要一个布尔表达式:
例如
ng-class="{ 'red': color=='red' }"
在你的例子中 $scope.changeColor return -1
我的问题是我的项目没有很好地验证 ng-class,即使在开始应用不应该
的 class 时也是如此var app = angular.module('plunker', ['angular.filter']);
app.controller('MainCtrl', function($scope) {
$scope.colores = [{
"name": "red"
}, {
"name": "blue"
}, {
"name": "pink"
}, {
"name": "green"
}, {
"name": "orange"
}];
$scope.color = [];
$scope.setColors = function(x){
if(x == 1){
$scope.color = ['red', 'blue', 'orange'];
}else{
$scope.color = ['green', 'pink'];
}
console.log($scope.color);
}
$scope.changeColor = function(pColor){
return $.inArray(pColor, $scope.color);
};
});
/* Put your css in here */
.red{background: red;}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="x">
<option value="0">0</option>
<option value="1">1</option>
</select>
<button ng-click="setColors(x)">Change</button>
<div ng-repeat="color in colores | filter: { category: subcategory.category, subcategory: subcategory.subcategory }"><!--Level 3-->
<p ng-class="{ 'red': changeColor( '{{ color.name }}' ) }" class=''>{{ color.name }}</p>
</div>
</body>
</html>
我需要的是每次数组更改时,如果在数组中找到此标签 p 的名称,p 标签会激活或停用红色 class。
我一直在寻找其他问题的解决方案,但 none 已经解决了问题。
我附上项目
ng-class 需要一个布尔表达式:
例如
ng-class="{ 'red': color=='red' }"
在你的例子中 $scope.changeColor return -1