我在页面上有一些过滤器,我需要将select元素的值与GET-param同步。
<div ng-app="TourSearchApp">
<form ng-controller="SearchFilterCtrl">
<select ng-model="country" ng-options="item.id as item.name for item in countries">
<option value="">Choose country</option>
</select>
</form>
</div>
<script>
var app = angular.module('TourSearchApp', []);
app.controller('SearchFilterCtrl', ['$scope', '$http', '$location', function($scope, $http, $location) {
$http.get('/api/countries/').success(function(data) {
$scope.countries = data;
});
$scope.country = $location.search()['country']; // (1)
$scope.$watch('country', function(newValue) { // (2)
$location.search('country', newValue);
});
}]);
</script>
字符串(1)和(2)使$ scope.country和GET-param country同步。
一切正常。但是,当页面加载某些GET参数时,它不适用于SELECT。
即选择元素保持未选中状态。为什么?
最佳答案
您应该从国家数组中搜索该参数,然后为国家ng-model
设置该对象ID。
$http.get('/api/countries/').success(function(data) {
$scope.countries = data;
if(country)
$scope.country = ($filter('filter')($scope.countries ,{ name: $location.search()['country'] }))[0].id;
});
要么
您应该在URL中传递国家/地区的
id
,以便将分配的值正确绑定到ng-options
模型值,并在下拉列表中获得预先填充的值,您可能需要在track by id
中使用ng-options
ng-options="item.id as item.name for item in countries track by id"