当第二个 DD 取决于第一个时，使用 AngularJS 自动选择两个下拉列表

Question

我在 table 中有数据，其中有城市列表。当我点击更新相同的表格时，数据会填入 fields.I 希望我的下拉列表，国家和Sate 应该是根据城市的数据库自动 selected 的。我的国家正在填满，但州不是根据国家/地区填满的。我想使用 AngularJS 来执行此操作。我使用 ng-repeate 来填充下拉列表，并使用 ng-selected 来 select 数据。 AngularJS我使用的版本是1.6.8

 **HTML:-**
                   <div class="col-md-6" id="StateNameDIV">
                                        <label for="lblSate" class="control-label">Select State</label>
                                        <select id="ddlType" class="full-width form-control" ng-model="insert.State_ID" ng-change="citylistname(insert.State_ID)">
                                            <option value="{{state.State_ID}}" ng-repeat="state in statedata" ng-selected="insert.State_ID==state.State_ID">                        {{state.State_Name}}</option>
                                        </select>

                                    </div>

                                    <div class="col-md-6" id="CityDIV">
                                        <label for="lblCity" class="control-label">Select City</label>
                                        <select id="ddlCity" class="form-control" ng-model="insert.City_ID">
                                            <option value="{{city.City_ID}}" ng-repeat="city in citydata" ng-selected="insert.City_ID==city.City_ID">
                                                {{city.City_Name}}
                                            </option>
                                        </select>
                                    </div>



**JS:-**

function statelistname() {
        var data = $http.get('/State/StateList');
        data.then(function (data) {
            $scope.statedata = data.data.StateList;
            console.log($scope.statedata);
        }); data.catch(function (data) {
            alert(data.data);
        });
    };
    statelistname();

$scope.citylistname = function () {
        console.log(this.insert.State_ID);
        var subdata = this.insert.State_ID;

        var data = $http.post('/City/CityList/' + subdata)
        data.then(function (data) {
            $scope.citydata = data.data.CityList;
            console.log($scope.citydata);

        }); data.catch(function (data) {
            alert(data.data);
        });
    };

Answer 1

如果我正确理解了你的问题，我认为这对你有帮助

Html

<select class="form-control" id="State" ng-options="x.id as x.title for x in states" ng-change="updateCityList()" ng-model="stateId"></select>

<select class="form-control" id="City" ng-options="x.id as x.title for x in citiesOfState" ng-model="cityId"></select>

控制器

您必须创建一个数组，其中包含一个州的城市。此函数每次 state 更改时，都会更新城市下拉列表的数据。

$scope.stateId = 13;

function updateCityList() {
    $scope.cicitiesOfState = [];
    $scope.allCities.forEach(function(itm){
        if(itm.stateId == $scope.stateId) $scope.cicitiesOfState.push(itm);
    });
    $scope.cityId = $scope.cicitiesOfState[0].id;
}

当第二个 DD 取决于第一个时，使用 AngularJS 自动选择两个下拉列表

Both drop down auto selected using AngularJS when second DD is depend on first

angularjs

angularjs-scope

angularjs-ng-repeat

angularjs-ng-model