Question

我有两个选择元素，第一个是我们的国家名单选中其中一个选项，第二个选择元素成员从DB填充当我们选择相关时，此列表是所选国家/地区的省份省份从DB如何添加选项到angularJs

的第二个选择

<div class=" col-md-6 col-xs-12" ng-controller="CountryController " ng-init="GetList()" ng-class="{'has-error':regForm.CountyId.$error.invalidSelectValue}">
   <span class="iconHolder fa fa-flag-checkered"></span>
   <select material-select watch ng-model="Countries" name="CountyId" data-val-required="مشخص کردن کشور الزامی است ." required show-message ng-change="GetProvinceList(Countries,regForm.province)">
      <option value="">country</option>
      <option ng-repeat="country in CountryList" value="{{country.Id}}">{{country.Name}}</option>
   </select>
</div>
<div class=" col-md-6 col-xs-12" ng-controller="CountryController" ng-init="GetProvinceList(null,regForm.province)">
   <span class="iconHolder fa fa-flag-checkered"></span>                        @*ng-options="record.Id as record.Name for record in GetProvinceList()"*@
   <select ng-model="province"  name="province" SelectFill>
      <option value="">province</option>
      <option ng-repeat="province in ProvinceList" value="{{province.Id}}">{{province.Name}}</option>
   </select>
</div>

这是我的控制：

var CountryController = function ($scope, $location, GetCountriesFactory, ProvinceFactory) {
    $scope.CountryList = [];
    $scope.ProvinceList = [];
    $scope.GetList = function () {
        GetCountriesFactory.GetList().then(function (response) {
            if (response.success) {
                $scope.CountryList = response.List;
            }
        })
    }
    $scope.GetProvinceList = function (countryId, _element) {
        console.log(angular.element(_element));
        angular.element(_element).removeAttr('disabled')
        $scope.ProvinceList = [{ Id: 5555, Name: 'hamid' }];
        return $scope.ProvinceList;
    }
}

Answer 1

<div ng-controller="AjaxCtrl">
      <h1>AJAX - Oriented</h1>
    <div>
        Country: 
        <select id="country" ng-model="country" ng-options="country for country in countries">
          <option value=''>Select</option>
        </select>
    </div>
    <div>
        City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>
    </div>
    <div>
        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
    </div>
</div>
  <div ng-controller="StaticCtrl">
      <h1>Static - Oriented</h1>
      <p>This approach may be better when you have the entire dataset</p>
    <div>
        Country: 
        <select id="country" ng-model="cities" ng-options="country for (country, cities) in countries">
          <option value=''>Select</option>
        </select>
    </div>
    <div>
        City: <select id="city" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select>
    </div>
    <div>
        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
    </div>
  </div>

在控制中：

function AjaxCtrl($scope) {
    $scope.countries = ['usa', 'canada', 'mexico', 'france'];
    $scope.$watch('country', function(newVal) {
        if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];
    });
    $scope.$watch('city', function(newVal) {
        if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
    });
}

按其他选择更改事件的顺序填充选择元素 - angularjs

1 个答案: