角度级联下拉没有选择ng-model值?

时间:2015-08-10 04:44:01

标签: javascript jquery angularjs

这里我附上了示例代码.i已经为国家,州,城市做了级联下拉列表。但它不适用于我http://jsfiddle.net/sreemohan143/U3pVM/17790/我创建变量并像$ scope一样传递它不显示值。

angular.module('test', [])
  .controller('TestController', ['$scope',
      function($scope) {
	  $scope.states='India';
	  $scope.cities='Maharashtra';
	  $scope.city='Mumbai';
	  
	  //$scope.countries = {
          //'India': {
            //'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
            //'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
            //'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
          //},
          //'USA': {
            //'Alabama': ['Montgomery', 'Birmingham'],
            //'California': ['Sacramento', 'Fremont'],
            //'Illinois': ['Springfield', 'Chicago']
         // },
         // 'Australia': {
            //'New South Wales': ['Sydney'],
            //'Victoria': ['Melbourne']
          //}
        //};
	  
	  
        

        $scope.getCountry = function(val) {
          for (var key in $scope.countries) {
            if ($scope.countries.hasOwnProperty(key)) {
              if ($scope.countries[key] === val) {
                alert('You selected: ' + key);
              }
            }
          }
        };
        
        $scope.getCity = function(city, state) {
          for (var key in state) {
            if (state.hasOwnProperty(key)) {
              if (state[key] === city) {
                alert('You selected: ' + key);
              }
            }
          }
        };

        $scope.alertCity = function(city) {
          alert('You selected ' + city);
        };
  }]);
<div ng-app="test">
  <div ng-controller="TestController">
    <div>
      Country:
      <select id="country" ng-model="states" ng-options="country for (country, states) in countries" ng-change="getCountry(states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      States:
      <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" ng-change="getCity(cities, states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      City:
      <select id="city" ng-disabled="!cities || !states" ng-model="city" ng-change="alertCity(city)">
        <option value=''>Select</option>
        <option ng-repeat="city in cities" value="{{city}}">{{city}}</option>
      </select>
    </div>
  </div>
</div>

0 个答案:

没有答案