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

Question

通常我们使用单独的选择框进行级联下拉列表。如下图像。

我的要求完全不同。我想添加仅限单选框，这将充当级联行为。

Simple Example process : (yourSelectBox - name of Select Box)
1) At First Instance It will show countries name in yourSelectBox
2) lets say , If you select/click India as Coutry,
3) now yourSelectBox should have States List like Maharashtra, Gujrat etc
4) If you select Maharashtra as your state,
5) how yourSelectBox should have City List.
6) finally you select your city.
Refer below image. 

我们可以通过关注事件来刷新你的选择框的值（使用$ watch选择值）吗？

Answer 1

<强> 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