Question

我的项目遇到了一个问题。我必须使用多个绑定下拉列表，其中一个下拉列表取决于预先选择的项目。例如，我有一个具有Country，Region和City的Person类，这三个都是从下拉列表中选择的。区域下拉取决于国家下拉列表的选定项目，即区域下拉列表必须包含属于所选国家/地区的区域列表;在用户选择区域后加载城市下拉列表，并且仅包含属于所选区域的城市。

我试图像这里显示的那样：http://jsfiddle.net/TheSharpieOne/Xku9z/1/，但它没有用。在我“过滤”依赖下拉列表的来源并将其传递到范围之后，它不会重新加载，并且依赖下拉列表的选项保持不变。

然后我尝试在控制器中手动填充下拉选项，然后将其加载到下拉列表中。

<div data-ng-controller="spLocationControllers">
    <select ui-select2 ng-model="person.country_id" id="cbCountry" data-ng-change="updateCountry()">
    <option data-ng-repeat="item in spCountryList" value="{{item.id}}">{{item.name}}</option>
    </select>
</div>

<div data-ng-controller="spLocationControllers">
  <select data-ng-model="person.region_id" id="cbRegion" data-ng-change="updateRegion()"></select>
</div>


<div data-ng-controller="spLocationControllers">
   <select data-ng-model="person.district_id" id="cbCity"></select>
</div>

var listCountry = [{id: 1, name: "Country - 1"}, 
                 {id: 2, name: "Country - 2"},
                 {id: 3, name: "Country - 3"}];

var listRegion = [{id: 1, name: "Region - 1.1", countryId: 1},
                {id: 2, name: "Region - 1.2", countryId: 1},
                {id: 3, name: "Region - 2.1", countryId: 2},
                {id: 4, name: "Region - 2.2", countryId: 2},
                {id: 5, name: "Region - 3.1", countryId: 3},
                {id: 6, name: "Region - 3.2", countryId: 4}];

var listCity = [{id: 1, name: "City - 1.1", RegionId: 1},
                {id: 2, name: "City - 1.2", RegionId: 2},
                {id: 3, name: "City - 2.1", RegionId: 3},
                {id: 4, name: "City - 2.2", RegionId: 4},
                {id: 5, name: "City - 3.1", RegionId: 5},
                {id: 6, name: "City - 3.1", RegionId: 6}];


function spLocationControllers($scope)
{
    $scope.updateCountry = function()
    {
       var strOption = '<option value=-1> </option>';
       var cbv = $("#cbCountry option:selected").val();
       /*doing something with data and get to strOptions the list of regions that belong to selected country
   for example, if in cbCounty user selects "Country - 2" then strOptions would be something like this:
   '<option value=-1> </option> 
    <option value=3> Region - 2.1 </option>
    <option value=4> Region - 2.2 </option>'
   */

     $('#cbRegion')
            .find('option')
            .remove()
            .end()
            .append(strOption)
        ;
}
$scope.updateRegion = function()
{
   var strOption = '<option value=-1> </option>';
   var cbv = $("#cbRegion option:selected").val();
   /* forming corresponding list of cities and setting this list to strOptions  */

     $('#cbCity')
            .find('option')
            .remove()
            .end()
            .append(strOption)
        ;
    }
}

它运行正常，但是当我打开我在cbCountry，cbRegion和cbCity中已经有价值的类Person的编辑表单时，它没有显示cbRegion和cbCity的值。请帮我解决这个问题。或者向我展示实现这整个任务的另一种方式。

多个绑定下拉列表

0 个答案: