选择 ng-options 不使用 ajax 在 AngularJS 中更新 ng-model答案

【问题标题】：select ng-options not updating ng-model in AngularJS with ajax选择 ng-options 不使用 ajax 在 AngularJS 中更新 ng-model
【发布时间】：2016-03-08 03:39:32
【问题描述】：

我有一个简单的问题，我真的不知道我的逻辑中缺少什么。

在此Fiddle 工作正常（不使用 ajax/超时），但我想了解并修复为什么当我应用相同的逻辑与超时/ajax 时没有发生以下行为！

这是我的简单示例：JS FIDDLE

HTML：

<body data-ng-app="appMain">
    <div ng-controller="SearchController">
        <input type="text" ng-model="SearchTerm" />
        <input type="button" value="Submit Search" ng-click="QuerySuggestions()" />
        <select ng-show="ShowSuggestion" name="cmbSelectedSuggestion" ng-model="SelectedSuggestion" ng-options="text as suggestion.Detail for suggestion in SuggestionList" ng-change="WhoIsSelected(suggestion)">
        </select>
    </div>
</body>

AngularJS：

angular.module('appMain',[])
.controller('SearchController',function($scope, $http, $timeout){
  $scope.SearchTerm = '';
  $scope.ShowSuggestion = false;
  $scope.SuggestionList = [];
  $scope.SelectedSuggestion = null;
  $scope.QuerySuggestions = function()
  {
    //Simulating an AJAX that my response happens 2s afterwards
    $timeout(function(){
      var oJSON = {"List": [
              {
                  "Id": 1,
                  "Type": "State",
                  "Name": "Rio de Janeiro",
                  "Detail": "Rio de Janeiro - State, Brazil"
              }
              ,
              {
                  "Id": 1,
                  "Type": "City",
                  "Name": "Rio de Janeiro",
                  "Detail": "Rio de Janeiro - City, Rio de Janeiro, Brazil"
              }]};

        $scope.SuggestionList = oJSON.List
        $scope.ShowSuggestion = true;
    }, 2000);

  }

  $scope.WhoIsSelected = function($option){
    $scope.WhoIsSelectedFirstApproach();
    $scope.WhoIsSelectedSecondApproach($option);
  }

  $scope.WhoIsSelectedFirstApproach = function(){
    console.log($scope.SelectedSuggestion); //why undefined !?!?!
  }

  $scope.WhoIsSelectedSecondApproach = function($option){
    console.log($option) //why undefined ?!?!?
  }
})

【问题讨论】：

首先我认为你应该使用 $timeout 服务
当然，这样可以避免 #scope.$apply 的必要性，请更新问题脚本

标签： javascript angularjs ajax autocomplete

【解决方案1】：

在您的 ng-options 中，它应该是 suggestion.Detail as text 而不是 text as suggestion.Detail。

【讨论】：

【解决方案2】：

好吧，经过更大范围的搜索，我设法解决并理解了我的错误。

首先，由于我的 T-SQL 背景，我不明白“文本”是表达式 text as suggestion.Detail for suggestion in SuggestionList 中 sugestion.Detail 字段的别名，但事实并非如此！这里的“文本”一词不是别名，它是您希望 AngularJS 公开为 ng-model 的对象/object.field ... 所以，也就是说，在我的情况下的解决方案（列表中的对象为 ng-模型）正在更新为：suggestion as suggestion.Detail for suggestion in SuggestionList

ng-options="suggestion as suggestion.Detail for suggestion in SuggestionList"

好的，这只是解决了 WhoIsSelectedFirstApproach，但是如果我想将对象传递给 ng-change 中的函数，则在表达式中使用 suggestion 确实有效...（不知道为什么他们对不同的表达式使用不同的表达式逻辑ng-*) 但要解决这个问题，你可以参考 ng-change 中的 ng-model 字段：所以我可以将Function(suggestion) 更改为Function(modelField)，如下所示：

ng-change="WhoIsSelected(SelectedSuggestion)"

SOLVED JS FIDDLE

【讨论】：