在 Angular.js 中使用 cookie 填充选择依赖下拉列表答案

【问题标题】：Populate select dependent dropdowns with cookies in Angular.js在 Angular.js 中使用 cookie 填充选择依赖下拉列表
【发布时间】：2018-06-02 04:42:26
【问题描述】：

我在 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>

【问题讨论】：

很难说发生了什么我会调查他们是否互相过滤，如果你有阿尔伯塔，然后是美国，因为当你改变一个时，加拿大的 cookie 可能仍然被设置。
我有时会看到第三个下拉列表（城市）有时只是选择一个完全随机的城市，我没有选择或存储在 cookie 中
我的意思是，ng-options 可能会覆盖所选值。尝试不使用它，看看会发生什么。
我已将下拉菜单减少到只有一个（国家），但仍有大约 1/10 次显示为空白，但如果我只是打印出 cookie，它显然就在那里。

标签： javascript jquery angularjs cookies

【解决方案1】：

解决方案！ 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;
    };
};

【讨论】：