Question

我在表格中有数据列表中有城市列表。当我点击同一表格上的更新数据填写到字段中时。我希望我的下拉，国家和国家都应该从数据库中自动选择城市基地。我的国家正在填补，但国家不是以国家为基础填补的。我想用AngularJS做这件事。我已经使用ng-repeate填充下拉列表和ng-selected来选择数据。我使用的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选择下拉自动

1 个答案: