2013-06-23 4 views
6

Ich habe ein Problem mit ng-Klasse in AngularJS - es wird nicht ordnungsgemäß aktualisiert.ng-Klasse wird nicht aktualisiert, wenn es nach dem Aufruf der Funktion mit NG-Klick ausgeführt werden soll

Ausblick:

<div class="cal-day" ng-repeat="day in schedule"> 
    ... 
    <div class="entry" ng-click="entryDetails(entry)" ng-repeat="entry in day.blockGrid" 
    ng-class="{'selected': isSelected(entry), 'bg-{{entry.color}}': entry, 'bg-empty': !entry}"> 
     {{isSelected(entry)}} 
     ... 
    </div> 
</div> 

JS:

$scope.entryDetails = function(entry) { 
    $scope.entryForDetails = entry; 
}; 

$scope.isSelected = function(entry) { 
    return $scope.entryForDetails === entry; 
}; 

CSS-Klasse ausgewählt ist fein umgesetzt - wenn ich ersetzen isSelected (Eintrag) mit wahr in ng-Klasse wird die Klasse ordnungsgemäß angewendet.
Die gleiche Sache mit isSelected() Funktion - er druckt richtig wahr oder falsch je nachdem, ob das Element ausgewählt ist.
Obwohl beide Elemente arbeiten, sie weigern sich irgendwie zusammenarbeiten, und die div class nicht aktualisiert zu ausgewählt wenn isSelected (Eintritt) kehrt wahr.

Edit:

Modell gespeichert in Tage

{ 
    "date": "6.6.2013", 
    "blockGrid": [ 
     null, 
     null, 
     null, 
     null, 
     null, 
     null, 
     { 
     "group": "ABCD", 
     "subjectName": "AB CD", 
     "subjectShorthand": "PW", 
     "type": "c", 
     "number": 4, 
     "profName": "ABAB", 
     "date": "2013-06-05T22:00:00.000Z", 
     "venue": "329 S", 
     "timetableBlock": 7, 
     "color": 16, 
     "_id": "51c3a442eb2e46a7220000e2" 
     } 
    ] 
    } 

Wie Sie sehen, es ist eine Anordnung von 7 Elementen, die entweder null oder enthalten einen Eintrag Objekt sind.

Ich habe vergessen zu erwähnen, dass der gepostete Bereich meiner Ansicht innerhalb einer anderen ng-Wiederholung ist. Das obige Code-Snippet wird jetzt erweitert, um das zu berücksichtigen.

+0

Können Sie das in 'day.blockGrid' gespeicherte Modell posten? – callmekatootie

+0

sicher, ich habe meine Post aktualisiert – fau

+0

Ich dachte, ng-Klasse zu einem booleschen bewertet .. noch hier bewertet es "null" und "! Null". Ist das erlaubt? – rGil

Antwort

2

Die NG-Klasse, wie Sie es eingerichtet haben, möchte einen booleschen Ausdruck auswerten, den Ihr erster Ausdruck im Objekt gemacht hat. Die nächsten beiden Ausdrücke versuchen jedoch, das Objekt entry auszuwerten, und nicht das Ergebnis isSelected(entry), das true/false zurückgibt.

So zu korrigieren:

ng-class="{'selected': isSelected(entry), 'bg':isSelected(entry), 'bg-empty':!isSelected(entry)}" 

Das heißt, wenn Sie etwas anderes versuchen. Beachten Sie auch, dass ich bg-{{entry.color}} entfernt habe. Ich habe keine Ahnung, wie man eine Bereichseigenschaft innerhalb einer ng-Klasse auswertet oder ob es überhaupt möglich ist.

Here is the working plunker demo. Dies ist möglicherweise nicht das, wonach Sie suchen, aber es kann Ihnen zumindest bei der Fehlerbehebung helfen.