使用Angular.js中的cookie填充选择的相关下拉列表

Posted 2021-05-06

我在Angular中构建了一个三层依赖的下拉列表，但是我在使用保存的cookie填充值时遇到了问题。有时，所有三个都会正确填充，有时它们只显示为空白字符串，即使1或2只会填充但不会填充第三个。在html代码中，我已经在段落标记中公开了模型，因此我知道从cookie中检索了值，但它们没有显示在选择下拉列表中。请原谅下面的任何小错误。

控制器：

        angular.module("CountryApp").controller("filterController", ['$scope', '$http', '$location', '$cookies', function ($scope, $http, $location, $cookies)
        {
            // Getting cookies and trying to assign to models
            $scope.loadCookies = function() {
                var cityCookie = JSON.parse($cookies.get('country'));
                if (cityCookie == null) {
                    return;
                } else {
                    $scope.selectedCountry = JSON.parse($cookies.get('country'));
                    $scope.selectedState = JSON.parse($cookies.get('state'));
                    $scope.selectedCity = cityCookie;
                }
            };

            // When save button is clicked...
            $scope.changedValue = function(country, state, city) {
              $scope.selectedCountry = country;
              $scope.selectedState = state;
              $scope.selectedCity = city;
              // Add to cookies
              $cookies.put('country', JSON.stringify(country));
              $cookies.put('state', JSON.stringify(state));
              $cookies.put('city', JSON.stringify(city));
            };

            $scope.list = [
              { 'COUNTRY': 'USA', 'STATE': 'Ohio', 'CITY': 'Cleveland' },
              { 'COUNTRY': 'USA', 'STATE': 'Ohio', 'CITY': 'Columbus' },
              { 'COUNTRY': 'USA', 'STATE': 'Ohio', 'CITY': 'Cincinnati' },
              { 'COUNTRY': 'USA', 'STATE': 'Ohio', 'CITY': 'Akron' },
              { 'COUNTRY': 'USA', 'STATE': 'California', 'CITY': 'Los Angeles' },
              { 'COUNTRY': 'USA', 'STATE': 'California', 'CITY': 'San Diego' },
              { 'COUNTRY': 'USA', 'STATE': 'California', 'CITY': 'San Francisco' },
              { 'COUNTRY': 'USA', 'STATE': 'California', 'CITY': 'Santa Monica' },
              { 'COUNTRY': 'Canada', 'STATE': 'Alberta', 'CITY': 'Edmonton' },
              { 'COUNTRY': 'Canada', 'STATE': 'Alberta', 'CITY': 'Calgary' },
              { 'COUNTRY': 'Canada', 'STATE': 'British Columbia', 'CITY': 'Victoria' },
               { 'COUNTRY': 'Canada', 'STATE': 'British Columbia', 'CITY': 'Vancouver' },
            ];
         }]);

         // Custom filter to only return uniques. I put it here just for readability on stackoverflow
         app.filter('unique', function() {
            return function(collection, keyname) {
              // we define our output and keys array;
              var output = [],
                  keys = [];

              angular.forEach(collection, function(item) {
                  var key = item[keyname];
                  if(keys.indexOf(key) === -1) {
                      keys.push(key);
                      output.push(item);
                  }
              });
              return output;
           };
        });

HTML：

<div class="form-group" ng-init="loadCookies()">
            <div ng-app="CountryApp">
            <select class="form-control" id="country" ng-model="selectedCountry" ng-options="option.COUNTRY for option in list | unique:'COUNTRY'">
              <option value="" disabled selected>Country</option>
            </select>

            <select class="form-control" id="state" name="state" ng-model="selectedState" ng-disabled="!selectedCountry" ng-options="option.STATE for option in list | unique: 'STATE' | filter: { COUNTRY: selectedCountry.COUNTRY }">
                <option value="" disabled selected>State</option>
            </select>

            <select class="form-control" id="city" name="city" 
              ng-model="selectedCity" ng-disabled="!selectedArea" 
              ng-options="option.CITY for option in list | unique: 'CITY' |     filter: {STATE: selectedState.STATE, COUNTRY: selectedCountry.COUNTRY}">
              <option value="" disabled selected>City</option>
            </select>


              <p>Selected Country: {{ selectedCountry }} </p>
              <p>Selected State: {{ selectedState }}</p>
              <p>Selected City: {{ selectedCity }}</p>
            </div>
            </div>

答案

解！ Angular不喜欢使用临时javascript变量检索和设置cookie。如果我们将它们切换到$ scope变量，它的效果很好。我也将它分解为loadCookies函数和assignCookies函数。

$scope.loadCookies = function() {
    $scope.countryCookie = JSON.parse($cookies.get('country'));
    $scope.stateCookie = JSON.parse($cookies.get('state'));
    $scope.cityCookie = JSON.parse($cookies.get('city'));
};

$scope.assignCookies = function() {
    console.log("assigning");
    if ($scope.cityCookie == null) {
        return;
    } else {
        $scope.selectedCountry = $scope.countryCookie;
        $scope.selectedState = $scope.stateCookie;
        $scope.selectedCity = $scope.cityCookie;
    };
};