Question

如果我选择基于城市的国家将基于城市选择区域将来到我已经进行级联下拉。我想推送一些选定的国家，州，city.i我试图推动使用像$ scope.country这样的模型但是它不能帮我前进

＆＃13;

angular.module('test', [])
  .controller('TestController', ['$scope',
      function($scope) {
        here i already selected countries, state,city from home page         $scope.countries=JSON.parse(window.localStorage.getItem("countries"));
console.log($scope.countries);
        //console I'm getting
//India
$scope.state=JSON.parse(window.localStorage.getItem("state"));
console.log($scope.state);
//console I'm getting
//Maharashtra
$scope.city =JSON.parse(window.localStorage.getItem("city"));
console.log($scope.city);
//console I'm getting
//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) {
                console.log('You selected: ' + key);
              }
            }
          }
        };
        
        $scope.getCity = function(city, state) {
          for (var key in state) {
            if (state.hasOwnProperty(key)) {
              if (state[key] === city) {
                console.log('You selected: ' + key);
              }
            }
          }
        };

        $scope.alertCity = function(city) {
          console.log('You selected ' + city);
        };
  }]);

＆＃13;

<script src="https://code.AngularJS.org/1.3.15/angular.min.js"></script>

<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>

＆＃13;

Answer 1

以这种方式写下ng-options标记：

<select ng-options="v as k for (k, v) in countries" ng-model="sCountry"></select>
<select ng-options="v as k for (k, v) in sCountry" ng-model="sState"></select>
<select ng-options="c as c for c in sState" ng-model="sCity"></select>

请查看plunk以获取完整代码：http://plnkr.co/edit/vsyy5fraMsHgildFJDRA?p=preview

如何在层叠下拉AngularJS中推送已选择的值？

1 个答案: