angularjs中的国家州城市

Question

我尝试为 Country State 和 City 创建一个下拉列表，我有 3 个单独的数组分别用于 Country、State 和 City。

我能够获取下拉列表中的元素，但问题是我无法使下拉列表依赖于前一个。

$scope.countrylist = [

  {
    Id: 1,
    CountryName: "India",

  }, {
    Id: 2,
    CountryName: "America"
  }
];

$scope.statelist = [{
    Id: 1,
    StateName: "Maharashtra",
    CountryId: 1
  },
  {
    Id: 2,
    StateName: "MadhyaPradesh",
    CountryId: 1
  }, {
    Id: 3,
    StateName: "Washington",
    CountryId: 2
  }
];
$scope.citylist = [{
    Id: 1,
    CityName: "Pune",
    StateId: 1
  },
  {
    Id: 2,
    CityName: "Mumbai",
    StateId: 1
  },
  {
    Id: 3,
    CityName: "Bhopal",
    StateId: 2
  }
];

<div class="row pb-4">
  <div class="col-md-4">
    <label for="Country">{{
																'guardian.country' | translate}} :</label>
  </div>
  <div class="col-md-6">
    <select class="form-control" id="country" name="country" ng-model="guardian.country" ng-options="country.CountryName as country.CountryName for country in countrylist track by country.CountryName" ng-change="getSelectedCountry()">
												                <option value=''>Select</option>
												              </select>
    <label>{{strCountry}}</label>

  </div>
</div>


<div class="row pb-4">
  <div class="col-md-4">
    <label for="State">{{'guardian.state' | translate}} :</label>
  </div>
  <div class="col-md-6">
    <select class="form-control" required id="state" name="state" ng-disabled="!guardian.country" ng-model="guardian.state" ng-options="state.StateName as state.StateName for state in statelist track by state.StateName" ng-change="getSelectedState()">
												                <option value=''>Select</option>
												              </select>
    <label>{{strState}}</label>

  </div>
</div>

<div class="row pb-4">
  <div class="col-md-4">
    <label for="City">{{
																'guardian.city' | translate}} :</label>
  </div>
  <div class="col-md-6">
    <select class="form-control" id="city" name="city" ng-disabled="!guardian.country || !guardian.state" ng-model="guardian.city" ng-options="city.CityName as city.CityName for city in citylist track by city.CityName" ng-change="getSelectedCity()">
											                <option value=''>Select</option>
            											    </select>
    <label>{{strCity}}</label>
  </div>
</div>

Answer 1

试试这个

var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
  $scope.guardian = {}
  $scope.countrylist = [

    {
      Id: 1,
      CountryName: "India",

    }, {
      Id: 2,
      CountryName: "America"
    }
  ];

  $scope.statelist = [{
      Id: 1,
      StateName: "Maharashtra",
      CountryId: 1
    },
    {
      Id: 2,
      StateName: "MadhyaPradesh",
      CountryId: 1
    }, {
      Id: 3,
      StateName: "Washington",
      CountryId: 2
    }
  ];
  $scope.citylist = [{
      Id: 1,
      CityName: "Pune",
      StateId: 1
    },
    {
      Id: 2,
      CityName: "Mumbai",
      StateId: 1
    },
    {
      Id: 3,
      CityName: "Bhopal",
      StateId: 2
    }
  ];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testCtrl">
  <div class="row pb-4">
    <div class="col-md-4">
      <label for="Country">country :</label>
    </div>
    <div class="col-md-6">
      <select class="form-control" id="country" name="country" ng-model="guardian.country" ng-options="country as country.CountryName for country in countrylist track by country.CountryName"> 												                <option value=''>Select</option>
												              </select>
      <label>{{strCountry}}</label>

    </div>
  </div>


  <div class="row pb-4">
    <div class="col-md-4">
      <label for="State">state :</label>
    </div>
    <div class="col-md-6">
      <select class="form-control" required id="state" name="state" ng-disabled="!guardian.country" ng-model="guardian.state" ng-options="state as state.StateName for state in statelist | filter:{CountryId:guardian.country.Id} track by state.StateName ">
												                <option value=''>Select</option>
												              </select>
      <label>{{strState}}</label>

    </div>
  </div>

  <div class="row pb-4">
    <div class="col-md-4">
      <label for="City">city :</label>
    </div>
    <div class="col-md-6">
      <select class="form-control" id="city" name="city" ng-disabled="!guardian.country || !guardian.state" ng-model="guardian.city" ng-options="city as city.CityName for city in citylist | filter:{StateId:guardian.state.Id} track by city.CityName">
											                <option value=''>Select</option>
            											    </select>
      <label>{{strCity}}</label>
    </div>
  </div>
</body>