javascript - 模型更改时 ng-options 不更新

Question

我有一个 JSON 对象，如下所示:

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

在 View 中，我想要一个下拉列表，用户可以在其中选择其中一个名称。我正在使用 ng-options 来实现此目的:

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

如果我将 JSON 硬编码到 Controller 中的变量 employees 中，则选择会呈现。但是如果我使用:

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

该选择未填充。我尝试添加 $scope.$apply() 但无济于事。有什么建议吗？

更新1

考虑到 Iso 的答案，我仍然选择不绑定(bind)。例如，如果我的 JavaScript 是:

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);
    });
}]);

尽管 console.log 返回包含所有三个名称的完整对象，但该选择仍然仅填充名字“John”。

Answer 1

您需要调用 $scope.$evalAsync()，或者使用 $http 而不是 jQuery(我推荐):

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

原因是 $http 知道 AngularJS 的摘要周期，而 jQuery 则不然。

避免使用 $scope.$apply() (如果摘要循环正在进行中，这可能会失败)和 $timeout (这很重，因为它会引发所有范围的摘要周期)。