Angular.js의 쿠키가있는 종속 선택 드롭 다운

Question

Angular에서 3 단계 종속 드롭 다운을 만들었지 만 저장된 쿠키로 값을 채우는 데 문제가 있습니다. 경우에 따라 세 개 모두 올바르게 채워지며 때로는 빈 문자열로 표시되기도합니다. 1 또는 2조차도 채워지지만 세 번째는 채워지지 않는 경우도 있습니다. HTML 코드에서 단락 태그에 모델을 노출 했으므로 값이 쿠키에서 검색되지만 선택 드롭 다운에 표시되지 않습니다. 아래의 사소한 실수는 용서해주십시오.

컨트롤러 :

 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는 쿠키를 검색하고 임시 자바 스크립트 변수로 설정하는 것을 좋아하지 않았습니다. $ 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; 
    }; 
};