angularjs - Angular-单选框的级联下拉行为

通常，我们使用单独的选择框来级联下拉列表。如下图所示。


我的要求是完全不同的。我只想添加单选框，它将充当级联行为。

简单示例过程：（yourSelectBox-选择框的名称）
1）首先，它将在yourSelectBox中显示国家名称
2）假设，如果您选择/单击印度作为国家，
3）现在yourSelectBox应该具有州列表，例如马哈拉施特拉邦，古杰拉特（Gujrat）等
4）如果您选择马哈拉施特拉邦为州，
5）yourSelectBox应该如何具有城市列表。
6）最后，选择您的城市。
请参考下图。



我们是否可以通过关注事件来刷新yourSelectBox的值（对选定Value使用$ watch）？

最佳答案

的HTML

<select ng-mode="selcountry" ng-change="getStates();">
<option value="coutry.id" ng-repeat="coutry in countries"> {{coutry.name}}</option>
</select>

<select ng-mode="selstate" ng-change="getCities();">
<option value="state.id" ng-repeat="state in states"> {{state.name}}</option>
</select>


<select ng-mode="selcity" >
<option value="city.id" ng-repeat="city in cities"> {{city.name}}</option>
</select>

控制器：

$scope.getStates = function (){
 //$scope.selcountry
 //call get states where counties is  $scope.selcountry
}

$scope.getStates = function (){
 //$scope.selcountry
 //call get states where counties is  $scope.selcountry
 $scope.states= result //set states to
}

$scope.getCities = function (){
 //$scope.selstate
 //call get states where counties is  $scope.selstate
 $scope.cities = result //set cities to
}

如果要在“单选菜单”中完整登录，则：

<select>
  <optgroup label="India">
    <optgroup label="Gujarat">
        <option value="1">Gandhi Nagar</option>
        <option value="2">Porubandar</option>
    </optgroup>
    <optgroup label="Delhi">
        <option value="3">Delhi-6</option>
        <option value="4">city</option>
    </optgroup>
  </optgroup>
</select>

Refer

关于angularjs - Angular-单选框的级联下拉行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41357836/