ng-repeat nicht aktualisiert Informationen nach $ Scope wurde aktualisiert

Question

Ich habe eine ng-repeat, die ein Formular mit einigen Startdaten erstellt. Dann kann der Benutzer diese Daten ändern und die Änderungen sollten im Formular erscheinen. Zuvor werden die vom Benutzer übermittelten Daten von einer anderen Funktion bereinigt, die von einem auf einer Schaltfläche aufgerufen wird.

Alles funktioniert gut unter der Haube (Ich überprüfte meine $scope.some_array, von der ng-repeat nimmt die Daten und die neuen Daten sind an der richtigen Stelle), aber nichts passiert auf der Seite.

Das Element:

<li ng-repeat="field in some_array" id="field-{{$index}}"> 
      <div class="{{field.field_color}}"> 
       <button type="button" ng-click="save_field($index)">done</button> 
       {{field.nice_name}} 
      </div> 
      <div id="field-input-{{$index}}"> 
       <input type="text" id="{{field.tag}}" value="{{field.content}}"> 
       <label for="{{field.tag}}">{{field.nice_name}}</label> 
      </div> 
    </li> 

save_field Code:

$scope.save_field = function (index) { 
     console.log($scope.some_array[index]["content"]) 
     var value = $("#field-" + index).children("div").children("input").val() 
     var name = $scope.some_array[index]["name"] 
     var clean_value = my_clean(value) 
     if (norm_value === "") { 
      return 
     } 
     $scope.some_array[index]["content"] = clean_value 
     console.log($scope.some_array[index]["content"]) 
    } 

Auf der Konsole sehe ich:

10.03.16 
10/03/16 

Welches Recht ist, aber in der Form nur ich 10.03.16 sehen. Ich habe bereits versucht $timeout(function(){$scope.$apply()}) als die letzte Zeile meiner Funktion, aber die Ausgabe ist immer noch die gleiche.

Answer 1

Sie sollten keine Eingabe wie diese verwenden, wenn Sie eine Variable an sie binden möchten. Digest-Schleife wird den Wert aktualisieren, aber es wird nicht sichtbar aktualisiert, da dies nicht HTML-natives Verhalten ist.

Verwendung ng-Modell stattdessen wird es Ansicht Wert des Eingangs aktualisieren, wie erwartet:

<input type="text" id="{{field.tag}}" ng-model="field.content"> 

Auch ng-Modell Ihrer Variablen werden aktualisiert, wenn Benutzer die Eingabe ändern, so dass Sie abrufen können haben einige Behandlungen viel leichter in save_field Funktion, ohne jQuery:

$scope.save_field = function (index) { 
    if (norm_value === "") { 
     return; 
    } 
    $scope.some_array[index]["content"] = my_clean($scope.some_array[index]["content"]); 
}; 

mehr Infos: https://docs.angularjs.org/api/ng/directive/ngModel