gpt4 book ai didi

javascript - 如何在 AngularJS 中同步 select 和 GET-param?

转载 作者:行者123 更新时间:2023-11-28 00:00:56 27 4
gpt4 key购买 nike

我的页面上有一些过滤器,我需要将选择元素的值与 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。IE。选择元素保持未选中状态。为什么?

最佳答案

您应该从国家数组中搜索该参数,然后为国家/地区设置该对象 ID ng-model

$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,以便分配的值能够正确绑定(bind)到 ng-options 模型值,并且您将获得在下拉列表中预填充的值,您可能需要在 ng-options

中使用 track by id
ng-options="item.id as item.name for item in countries track by id"

关于javascript - 如何在 AngularJS 中同步 select 和 GET-param?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31818524/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com