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

Question

I have some filter on the page and I need to synchronize value of select element with 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>

String (1) and (2) makes synchronization of $scope.country and GET-param country. Everything works. But when page loads with some GET-param it does not apply to SELECT. Ie select element stays unselected. Why?

Answer 1

You should search that parameter from the countries array and then set that object id for country 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;
});

OR

You should pass id of country in URL so that assigned value will get properly binded to the ng-options model value and you will get you value prepopulated inside drop down, you may need to use track by id inside ng-options

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

Answer 2

Here is a resulting working code

<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', '$filter', function($scope, $http, $location, $filter) {        
        $http.get('/api/countries/').success(function(data) {
            $scope.countries = data;
            // validate raw GET-param
            $scope.country = $filter('filter')(data, {id: $scope.country}).length ? $scope.country : null;
        });

        // convert string to number!
        $scope.country = +$location.search()['country'];
        $scope.$watch('country', function(newValue) {
            $location.search('country', newValue);
        });
    }]);
</script>