ng-class不能正常工作,不能验证表达式

时间:2017-04-21 20:29:59

标签: angularjs ng-class

我的问题是我的项目没有很好地验证ng-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>
&#13;
&#13;
&#13;

我需要的是每次我的数组更改时,如果在数组中找到此标签p的名称,则p标签会激活或停用红色类。

我一直在寻找其他问题的解决方案,但没有一个解决了这个问题。

我附上了项目

1 个答案:

答案 0 :(得分:0)

ng-class需要一个布尔表达式:

E.g。

ng-class="{ 'red': color=='red' }"

在您的示例中,$ scope.changeColor返回-1