NG選項當模型改變

沒有更新我有一個JSON對象，看起來像：NG選項當模型改變

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

在視圖我想在用戶選擇的名稱之一下拉。我使用ng-options來實現這一目標：

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

如果我硬編碼到JSON在我的控制變量employees選擇渲染。但是，如果我使用：

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

該選擇未填充。我已經嘗試添加$ scope。$ apply（）無效。有什麼建議麼？

更新1

將船上的國際標準化組織的答案我還是留下了選擇不具有約束力。例如，如果我的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返回將所有三個名字的全部對象只填充。

來源

2016-07-28 Patrick Olden

包裝你的代碼中$timeout：

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

當消化週期已經取得了進展$apply的調用可能會失敗。

但考慮使用$http而不是使用jQuery來提取數據。

來源

2016-07-28 15:49:38

嗨Shashank這是返回一個錯誤'不能讀取屬性'協議的'未定義'。我似乎無法診斷它。有任何想法嗎？ –

你在哪裏得到這個錯誤？ –

您需要可以致電$scope.$evalAsync()，或使用$http代替jQuery的位置（這我會建議）：

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

這樣做的原因是，$http知道AngularJS的」消化週期，而jQuery是不。

不要使用$scope.$apply()（如果摘要循環正在進行，則可能會失敗）和$timeout（因爲它會激發所有範圍的摘要循環）。

來源

2016-07-28 15:53:07 Iso

嗨Iso我恐怕似乎沒有工作。如果你能看看更新1，它將不勝感激！ –

您應該在Angular中使用$q庫中的承諾。

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

編輯如果使用$timeout是不是真的是正確的解決方案，因爲它不會讓您欣賞到同步控制。但是，我相信，使用$http可以使您的呼叫附帶內置的承諾。

來源

2016-07-28 15:53:31 itamar

嗨itamar恐怕我已經試過這個，它似乎並沒有工作。即使在回覆中，如果我對其他員工進行硬編碼，視圖也不會在選擇中顯示名稱。 –

NG選項當模型改變

回答

相關問題