select ng-options not updating ng-model in AngularJS with ajax
Question
I have a simple question and I really dont know what am I missing in my logic.
In this Fiddle is working fine (not using ajax/timeout) but I want to understand and also fix why the following behavior is not happening when I apply the same logic with a timeout/ajax !!
Here is my simple sample: 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 ?!?!?
}
})
2 answers
solution1
1 2015-12-03 13:53:59
在您的ng-options中，应该将suggestion.Detail as text而不是text as suggestion.Detail 。
solution2
0 2015-12-03 14:14:58
Well, after a bigger search I manage to solve and also understand my mistakes.
First, Due to my T-SQL background I was unterstanding that "text" was an alias for sugestion.Detail field in the expression text as suggestion.Detail for suggestion in SuggestionList but thats not the case! The word "text" here is not an ALIAS it is the object/object.field that u want AngularJS do expose as the ng-model... so, that said, the solution in my case (object in the list as ng-model) was updating to: suggestion as suggestion.Detail for suggestion in SuggestionList
ng-options="suggestion as suggestion.Detail for suggestion in SuggestionList"
Ok that simply resolves the WhoIsSelectedFirstApproach, but if I want to pass the object to a function in the ng-change, using suggestion in the expression doenst work... (dont know why they used different expression logics for different ng-*) but to solve that problem figured that u can reference the ng-model field inside the ng-change: so I could manage that changing Function(suggestion) to Function(modelField) as follows:
ng-change="WhoIsSelected(SelectedSuggestion)"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.