具有异步功能的 ng-model 奇怪行为

Question

下面是下拉 select离子代码：

<select ng-model="filter.area">
    <option value="">Select your location</option>
    <option ng-repeat="area in areaNames" value='{{ area.area_name }}'>{{ area.area_name }}</option>
</select>

ng-model 在调用 Async 函数之前在控制器中设置：

$scope.filter.area = $cookies['filterArea'];
// which evaluated to some value lets say 'Bole'

异步函数来了：

query.find({
   success: function(results_area) {
     $scope.$apply(function() {

        $scope.areaNames = results_area;

        for (var i = 0; i < $scope.areaNames.length; i++) {
          $scope.areaNames[i].area_name = $scope.areaNames[i].get('name');
        };

      });
   },
   error: function(error) {
      console.log("error in fetching area info....");
    }
   });

ng-model 没有更新。知道这里出了什么问题吗？

要查看演示，请转到此处： http://peppy-avatar-762.appspot.com/

然后select"Addis Ababa"和Select"Bole"作为区域然后点击寻找食物！检查左侧的区域过滤器。 ng-model 没有更新！

Answer 1

如果延迟加载选项，请使用 ng-options 而不是在 option

上使用 ng-repeat

<select data-ng-model="selectedItem" 
        data-ng-options="item for item in items track by item">
</select>

Working Plnkr

具有异步功能的 ng-model 奇怪行为

ng-model weird behavior with Asynchronous function

javascript

angularjs

angular-ngmodel