javascript - 在 Angular.js 中使用 cookies 填充选择的依赖下拉列表

Question

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

Controller :

        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>

Answer 1

解决方案! Angular 不喜欢使用临时 JavaScript 变量检索和设置 cookie。如果我们将它们切换到 $scope 变量，效果会很好。我还将它分解为 loadCookies 函数和 allocateCookies 函数。

$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;
    };
};