AngularJS와 (

Question

HTML

<div ng-controller="StaticCtrl"> 
    <h1>Static - Oriented</h1> 
    <p>This approach may be better when you have the entire dataset</p> 
<div> 
    Country: 
    <select id="country" ng-model="cities" ng-options="country for (country, cities) in countries"> 
     <option value=''>Select</option> 
    </select> 
</div> 
<div> 
    City: <select id="city" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select> 
</div> 
<div> 
    Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>   
</div> 

AngularJS와

function StaticCtrl($scope) { 
$scope.countries = { 
    'usa': { 
     'San Francisco': ['SOMA', 'Richmond', 'Sunset'], 
     'Los Angeles': ['Burbank', 'Hollywood'] 
    }, 
    'canada': { 
     'People dont live here': ['igloo', 'cave'] 
    } 
}; 

}

가 선택 될 때 드롭 다운은 가장 안쪽의 드롭 다운 값을받지 계단식 대신 세 번째 드롭 다운의 가치를 점점 즉, 드롭 다운 '교외') 그것의 색인을 반환, 나는 처음 두 개의 dropdowns을 얻을 수 있어요 ('공동 '시도', '도시') 값. 당신을 도움이된다면 코드 아래

Answer 1

이

var myapp = angular.module('myapp', []); 
 
     myapp.controller('AjaxCtrl', function ($scope) { 
 
      $scope.countries = ['usa', 'canada', 'mexico', 'france']; 
 
      alert($scope.countries); 
 
      $scope.$watch('country', function (newVal) { 
 
       if (newVal) $scope.cities = ['Los Angeles', 'San Francisco']; 
 
      }); 
 
      $scope.$watch('city', function (newVal) { 
 
       if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset']; 
 
      }); 
 
     }); 
 

 
    myapp.controller('StaticCtrl', function ($scope) { 
 
       $scope.countries = { 
 
        'usa': { 
 
         'San Francisco': ['SOMA', 'Richmond', 'Sunset'], 
 
         'Los Angeles': ['Burbank', 'Hollywood'] 
 
        }, 
 
        'canada': { 
 
         'People dont live here': ['igloo', 'cave'] 
 
        } 
 
       }; 
 
      });

<div ng-controller="AjaxCtrl"> 
 
     <h1>AJAX - Oriented</h1> 
 
    <div> 
 
     Country: 
 
     <select id="country" ng-model="country" ng-options="country for country in countries"> 
 
      <option value=''>Select</option> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select> 
 
    </div> 
 
    <div> 
 
     Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>   
 
    </div> 
 
</div> 
 
    <div ng-controller="StaticCtrl"> 
 
     <h1>Static - Oriented</h1> 
 
     <p>This approach may be better when you have the entire dataset</p> 
 
    <div> 
 
     Country: 
 
     <select id="Select1" ng-model="cities" ng-options="country for (country, cities) in countries"> 
 
      <option value=''>Select</option> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     City: <select id="Select2" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select> 
 
    </div> 
 
    <div> 
 
     Suburb: <select id="Select3" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>   
 
    </div> 
 
    </div>