2017-04-21 4 views
0

내 문제가되지NG 수준의 밤은 작업 아니라,

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="[email protected]" 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>

해야하는 클래스를 적용 시작할 때 내 프로젝트도 잘 NG 수준의 검증되지 않도록하는 표현을 확인하지 필요한 것은 배열이 바뀔 때마다 p 태그는이 레이블 p의 이름이 배열 안에 있으면 빨간색 클래스를 활성화하거나 비활성화합니다.

저는 다른 질문에서 해결책을 찾고 있었지만 아무도 문제를 해결하지 못했습니다.

일예 :

나는

답변

0

NG-클래스는 부울 식을 필요로하는 프로젝트를 부착 귀하의 예를 들어 $의 scope.changeColor 반환 -1

+0

에서

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

이 도와 주셔서 너무 감사 –