2013-10-28 24 views
47

Ich habe ein Array $scope.items.

Ich möchte, wenn der Artikel ist $first einer der ngRepeat, um die CSS-Klasse in hinzuzufügen.

Ist es etwas, das mit eckigen getan werden kann? Allgemein, wie kann ich mit den Booleans in Ajs umgehen?

<div ng-repeat="item in items"> 
    <div class='' > {{item.title}}</div> 
</div> 

Antwort

119

Es sollte

sein
<div ng-repeat="item in items"> 
    <div ng-class='{in:$first}' > {{item.title}}</div> 
</div> 

Blick auf ng-class Richtlinie in http://docs.angularjs.org/api/ng.directive:ngClass und in diesem Thread What is the best way to conditionally apply a class?

+0

Können Sie erklären, wie es funktionieren sollte? Hier ist Fiddle, wo Sie Ihren Weg implementieren können: http://jsfiddle.net/9Ymvt/673/ ​​Danke –

+2

Hier ist es http://jsfiddle.net/9Ymvt/675/ – Chandermani

4

Sie können mit Methodenaufruf versuchen Ansatz.

HTML

<div ng-controller = "fessCntrl"> 
<div ng-repeat="item in items"> 
    <div ng-class='rowClass(item, $index)' > {{item.title}}</div> 
</div> 
</div> 

JS

var fessmodule = angular.module('myModule', []); 

fessmodule.controller('fessCntrl', function ($scope) { 
    $scope.items = [ 
     {title: 'myTitle1', value: 'value1'}, 
     {title: 'myTitle2', value: 'value2'}, 
     {title: 'myTitle3', value: 'value1'}, 
     {title: 'myTitle4', value: 'value2'}, 
     {title: 'myTitle5', value: 'value1'} 
    ];   

    $scope.rowClass = function(item, index){ 
     if(index == 0){ 
      return item.value; 
     } 
     return ''; 
    };   
});  
fessmodule.$inject = ['$scope']; 

Demo Fiddle

Verwandte Themen