Javascript AngularJs级联下拉列表，在加载页面时需要选择

喜欢AngularJs，但目前仍停留在一个本应为大多数应用程序所共有的典型场景中。一、 然而，在研究/玩了将近6个小时后，却找不到解决方案

基本上，我的表单有两个下拉列表，选择区域后会加载“区域”选择选项：

<div class="form-group">
            <label>Regions</label>
            <select class="form-control" ng-model="selectedRegion.Id" ng-options="r.Id as r.Description for r in regions" ng-change="GetAreas(selectedRegion.Id)">
                <option value="">Please select a region..</option>
            </select>
        </div>
        <div class="form-group">
            <label>Areas</label>
            <select class="form-control" ng-model="selectedArea.Id" ng-options="a.Id as a.Description for a in areas">
                <option value="">Please select an area..</option>
            </select>
        </div>

区域
请选择一个地区。。
地区
请选择一个区域。。

在我的控制器中，首先我得到了父模型，也就是说，在以前的“创建”视图中保存的“客户”。此客户模型具有RegionId和AreaId，在加载上述“编辑”视图时，需要选择我

我通过以下JS代码实现了这一点：

manageCustomerRepository.getCustomer($routeParams.customerId).then(function(mainDetails) {
        $scope.customer = mainDetails;

        masterDataRepository.GetRegions().then(function (regionList) {
            $scope.regions = regionList;
            var index;
            for (var i = 0; i < $scope.regions.length; i++) {
                var currentRegion = $scope.regions[i];
                if (currentRegion.Id === parseInt($scope.customer.RegionId)) {
                    index = i;
                    break;
                }
            }
            $scope.selectedRegion = $scope.regions[index];
        });

        masterDataRepository.GetAreas($scope.customer.RegionId).then(function (areaList) {
            $scope.areas = areaList;
            var index;
            for (var i = 0; i < $scope.regions.length; i++) {
                var currentArea = $scope.areas[i];
                if (currentArea.Id === parseInt($scope.customer.AreaId)) {
                    index = i;
                    break;
                }
            }
            $scope.selectedArea = $scope.areas[index];
        });
    });

manageCustomerRepository.getCustomer（$routeParams.customerId）。然后（函数（mainDetails）{
$scope.customer=main详细信息；
masterDataRepository.GetRegions（）.then（函数（regionList）{
$scope.regions=区域列表；
var指数；
对于（变量i=0；i<$scope.regions.length；i++）{
var currentRegion=$scope.regions[i]；
if（currentRegion.Id==parseInt（$scope.customer.RegionId））{
指数=i；
打破
}
}
$scope.selectedRegion=$scope.regions[index]；
});
masterDataRepository.GetAreas（$scope.customer.RegionId）。然后（函数（areaList）{
$scope.areas=区域列表；
var指数；
对于（变量i=0；i<$scope.regions.length；i++）{
var currentArea=$scope.areas[i]；
if（currentArea.Id==parseInt（$scope.customer.AreaId））{
指数=i；
打破
}
}
$scope.selectedArea=$scope.areas[索引]；
});
});

加载编辑视图时，我可以获取区域的所有区域和区域，并从customer对象获取RegionId和AreaId，然后选择正确的选项。但是，我似乎无法更改所选区域。选项的selected='selected'属性没有更改，我无法让他们更改值

另外，我不完全确定当我使用ng model='selectedRegion.Id'和selectedArea.Id发回表单时，我的angular controller中是否会有一个customer对象

---

感谢您的帮助

$scope.customer.RegionId

是否始终设置为区域？否则，

index

将保持未定义状态，

$scope.regions[index]

也将未定义<代码>$scope.selectedRegion=$scope.regions[index]| |{}可能会处理这种情况。@n仅是“是”，应始终设置$scope.customer.RegionId。JS的当前状态允许我设置selectedRegion和Area，但有一种相当奇怪的行为，即即使用户在页面加载过程中选择了一个值而不是设置的值，区域ddl也不会改变。是否可以正常工作？@AdamWilson不幸的是，它本身就消失了。我们怀疑这可能是一个浏览器问题（可能是特定版本）。用户的抱怨并不多，所以花更多的时间来追根究底是不合理的。就个人而言，我仍然会，但我已经转移到NG2，它比ver1更令人敬畏！我们也开始使用TypeScript。对不起，我知道这帮不了你！