2016-07-28 87 views
0

Ok Ich habe eine JSON-Datei, die die Antworten speichert, die der Benutzer bereits beantwortet hat. Als nächstes habe ich eine ng-Wiederholung, die alle Fragen ausdruckt all die möglichen Antworten auf diese Fragen ...... was ich brauche ist, laden Sie die JSON-Datei und beobachten Sie die ng-Wiederholung für diese Werte und wie sie kommen ... wenden Sie eine andere CSS-Klasse auf diese eine Antwort (für Beispiel ändern Sie die Farbe des Textes) ....Lassen Sie ein JSON die Antworten von ng-repeat markieren, die mit denen in JSON übereinstimmen.

ich habe 3 Abschnitte und der Code unten sortiert meine Fragen in diesen Abschnitten

<ul style='display: inline-block' ng-repeat="(key, value) in q.flow" ng-if="q.sectionName == 'SectionName'"> 
<li>{{label(key)}}</li> 
</ul> 

<ul style='display: inline-block' ng-repeat="(key, value) in q.flow" ng-if="q.sectionName == 'SectionName2'"> 
<li>{{label(key)}}</li> 
</ul> 

<ul style='display: inline-block' ng-repeat="(key, value) in q.flow" ng-if="q.sectionName == 'SectionName3'"> 
<li>{{label(key)}}</li> 
</ul> 

JSON in ein $ scope.useranswersJso geladen wird n ...

+1

Haben Sie ein Beispiel für die json? Oder irgendein tatsächlicher Angular Code? – itamar

Antwort

0

Ich habe nicht viele Informationen - aber es sieht so aus, als würden Sie etwas wie ng-class verwenden. Hier ist, wie es funktioniert:

<ul style='display: inline-block' ng-class="{highlight: value === 'blah'}" ng-repeat="(key, value) in q.flow" ng-if="q.sectionName == 'SectionName'"> 
<li>{{label(key)}}</li> 
</ul> 

Also, wenn die die value wird diejenige, die Sie gerade sehen für (oder was auch immer andere Bedingung Sie erwarten zu markieren) - die Klasse der highlight automatisch hinzugefügt werden. Wenn diese Bedingung falsch ist, wird sie entfernt.

EDIT

Sie meinen wahrscheinlich auch über <li> Elemente iterieren, nicht <ul>:

<ul style='display: inline-block' ng-if="q.sectionName == 'SectionName'"> 
<li ng-class="{highlight: value === 'blah'}" ng-repeat="(key, value) in q.flow">{{label(key)}}</li> 
</ul>