2016-06-15 5 views
3

Hallo Ich habe eine Tabelle, die mit ng-repeat aufgefüllt wird. Jede Zeile der Tabelle enthält einige Eingaben, die in einer Datenbank gespeichert werden.Verwenden Sie nur ng-wenn das erste Mal die Daten lädt

Meine API übergibt ein View-Modell als JSON an Angular, wenn es bereits einen Wert für ein Objekt gibt, den ich den Wert in der Spalte ohne die Eingabe anzeigen möchte.

Das ist mein Tisch

<table class="table table-responsive"> 
<thead> 
    <tr> 
     <th></th> 
     <th>Result Value</th> 
     <th>Statement/Instructions</th> 
    </tr> 
</thead> 
<tbody> 
    <tr data-ng-repeat="c in myData.items"> 
     <td>{{ c.Name }}</td> 

     <td ng-if="c.NumericValue">{{c.NumericValue}}</td> 
     <td ng-if="!c.NumericValue"> 
      <input type="text" name="value" data-ng-model="c.NumericValue" data-ng-trim="false"> 
     </td> 

     <td ng-if="c.Statement">{{c.Statement}}</td> 
     <td ng-if="!c.Statement"> 
      <input type="text" name="statement" data-ng-model="c.Statement" data-ng-trim="false"> 
     </td> 
    </tr> 
</tbody> 

Diese fast außer dass funktioniert, wenn ich in einem einzelnen Zeichen in das Eingabe eingeben Feld der Eingang entfernt wird und der Wert wird als Text angezeigt. Ich weiß, dass Angular so funktionieren soll, aber gibt es eine Möglichkeit, nur die Daten zu überprüfen, wenn die Daten das erste Mal geladen werden und Angular den Zelleninhalt neu zu laden, damit ich meine Daten vollständig eingeben kann, ohne den Inhalt der Zellen neu zu laden.

Es tut mir leid, wenn dies grundlegend ist, aber ich benutze nur Angular und ich bin nicht vertraut mit allem, was es noch tun kann.

Vielen Dank im Voraus für jede Hilfe

UPDATE Um zu versuchen und zu klären, ng-wenn überprüft, ob c.NumericValue leer. Wenn es leer ist, wird die Eingabe angezeigt. Wenn ich einen Wert nach Eingabe des ersten Zeichens des Wertes eingabe. Das Eingabefeld wird entfernt und ersetzt mit

<td ng-if="c.NumericValue">{{c.NumericValue}}</td> 

Was ich will, ist, dass, wenn die Tabelle geladen ist zu prüfen, ob c.NumericValue einen Wert hat. IF zeigt es

<td ng-if="c.NumericValue">{{c.NumericValue}}</td> 

den Wert lassen Sie mir sonst Eingang

<td ng-if="!c.NumericValue"> 
    <input type="text" name="value" data-ng-model="c.NumericValue" data-ng-trim="false"> 
</td> 

Zum Beispiel verwenden, wenn ich in ‚10‘ eingeben will, nachdem ich in ‚1‘ das Eingabefeld eingeben ist mit der ersetzen Text 1'.

+0

Können Sie wieder erklären und mehr deutlich, was nicht funktioniert? –

+0

Zuerst rufen Sie die Daten asynchron ab und füllen sie dann in 'ng-repeat' aus. – AranS

+0

Sie könnten versuchen, das ng-Modell aus der Eingabe zu entfernen und das Modell mit ng-blur – gyc

Antwort

2

Wenn ich Ihre Frage verstehe, denke ich, dass Sie eine einmalige Bindung verwenden möchten (eingeführt in AngularJS 1.3), damit das ng-if nach dem ersten Digest nicht erneut ausgewertet wird. Wie folgt aus:

<td ng-if="::c.NumericValue">{{c.NumericValue}}</td> 
    <td ng-if="::!c.NumericValue"> 

und

<td ng-if="::c.Statement">{{c.Statement}}</td> 
    <td ng-if="::!c.Statement"> 
+0

Danke @jbrown, das klingt nach dem, was ich brauche, jetzt weiß ich, was der richtige Begriff ist. Ich werde es ausprobieren und die Antwort akzeptieren, wenn ich arbeite –

+0

yep es funktioniert perfekt danke –

+0

@JeffFinn - Gern geschehen – jbrown

Verwandte Themen