ng-Optionen nicht aktualisiert, wenn Modell

Question

geändert habe ich ein JSON-Objekt, das wie folgt aussieht:

[ 
    { 
    "empName": "John", 
    "ID": 1 
    }, 
    { 
    "empName": "Sam", 
    "ID": 2 
    }, 
    { 
    "empName": "Ben", 
    "ID": 3 
    } 
] 

Aus Sicht möchte ich ein Drop-Down, wo der Benutzer einen der Namen auswählt. Ich verwende ng-options dies zu erreichen:

<select ng-options="item as item.empName for item in employees track by item.ID" ng-model="emp.selected"> 
</select> 

Wenn ich hart Code die JSON in die Variable employees in meinem Controller die Auswahl macht. Wenn ich jedoch:

$.getJSON("path to JSON file",function(json){ 
    $scope.employees = json; 
}); 

Die Auswahl ist nicht ausgefüllt. Ich habe versucht, in $ scope. $ Apply() ohne Erfolg hinzuzufügen. Irgendwelche Vorschläge?

aktualisiert 1

an Bord nehmen, die Antwort von Iso bin ich immer noch links mit der Auswahl nicht bindend. Zum Beispiel, wenn mein Javascript ist:

app.controller('Ctrl', ['$scope', '$http', function($scope, $http) { 

    $scope.employees = [ 
     { 
     "empName": "John", 
     "ID": 1 
     }, 
    ]; 

    $http.get(" --PATH TO JSON-- ").then(function (res) { 
     $scope.employees = res.data; 
     console.log($scope.employees); 
    }); 
}]); 

Die select ist nach wie vor nur mit dem Vornamen ‚John‘ trotz der Tatsache, bevölkert, dass die console.log die volle Objekt mit allen drei Namen zurückgibt.

Answer 1

Wickeln Sie Ihren Code in $timeout:

$.getJSON("path to JSON file", function (json) { 
    $timeout(function() { 
     $scope.employees = json; 
    }) 
}); 

Der Aufruf von $apply fehlschlagen, wenn der Digest-Zyklus bereits im Gange ist.

Verwenden Sie jedoch die $http anstelle von jQuery, um Daten zu ziehen.

Answer 2

Sie müssen entweder $scope.$evalAsync() anrufen, oder verwenden Sie $http anstelle von jQuery hier (was ich empfehlen würde):

$http.get("path to JSON file").then(function (res) { 
    $scope.employees = res.data; 
}); 

Der Grund dafür ist, dass $http von AngularJS bewusst ist‘-Zyklus verdauen, während jQuery ist nicht.

Unterlassen Sie die Verwendung von $scope.$apply() (was bei einem Digest-Zyklus fehlschlagen kann) und $timeout (was schwerwiegend ist, da es einen Digest-Zyklus aller Ihrer Bereiche provoziert).

Answer 3

Sie sollten Versprechen mit der $q Bibliothek in Angular verwenden.

var getEmployees = function() { 
     var deferred = $q.defer(); 
     $.getJSON("path to JSON file", function (json) { 
      deferred.resolve(json); 
     }); 
     return deferred.promise; 
    } 

    getEmployees().then(res){ 
     $scope.employees = res.data; 
    } 

EDIT Wenn Sie $timeout verwenden eine Lösung nicht wirklich die richtige ist, da es nicht Sie die Synchronität Kontrolle über nicht geben. Die Verwendung von $http, um Ihre Anrufe zu tätigen, kommt jedoch mit eingebauten Versprechen, glaube ich.