AngularJs의 색인

Question

AngularJs 사용 & 부트 스트랩.

각 li 항목의 색인을 얻으려고하면 각 항목마다 색을 다르게 지정할 수 있습니다. 어떻게 할 수 있습니까? 이런 식으로 시험해 보았습니다.

HTML :

<ul> 
    <li class="alert alert-{{bgcolor($index)}}" ng-repeat="item in todolist">  
    <span>{{item.name}}</span>  
    </li>               
</ul> 

JS :

작동합니다

Answer 1

$scope.todolist = [ 
       { name: "Buy Food", done: false }, 
       { name: "Eat Food", done: false }, 
       { name: "Cook Food", done: true } 
      ]; 
$scope.bgcolor = function (i) { 
       var color = ""; 
       switch(i) 
       { 
        case 1: color="success"; 
        case 2: color = "warning"; 
        case 3: color = "danger"; 
       } 
       return color; 

      }; 

,하지만 당신은 스위치에서 break;이 누락 :

switch(i) { 
    case 1: color="success"; break; 
    case 2: color = "warning"; break; 
    case 3: color = "danger"; break; 
} 

를도 0 기반이므로 첫 번째 항목은이 클래스를 가져 오지 않습니다.

Answer 2

ng-repeat에 $ index를 사용하십시오. (반복자 반복 요소의 (0 ..-1) https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 3

you can try something like this 
<ul> 
    <li class="alert alert-{{bgcolor($index)}}" ng-repeat="item in todolist">  
    <span>{{item.name}}</span>  
    </li>               
</ul> 

JS: 

    $scope.todolist = [ 
        { name: "Buy Food", done: false }, 
        { name: "Eat Food", done: false }, 
        { name: "Cook Food", done: true } 
       ]; 
    $scope.bgcolor = function (i) { 
        var color = ['success','warning','danger']; 

        return color[index]; 

       };