Question

我在这里使用ng-options

有不同的案例

我的应用程序有两种模式。新模式和编辑模式

我有DISTRICTS和VILLAGES的SELECT输入类型。使用DISTRICT select的ng-change事件，根据DISTRICT选择填充VILLAGES选项。这在新模式下工作正常。

但是在编辑模式下，DISTRICT正确显示ng-model的值。但是VILLAGE选择输入项未显示ng-model值。这是因为，村庄选择中没有填充任何项目，因为DISTRICT的ng-change事件从未在编辑模式中触发。

我仍然希望在下拉列表中将VILLAGE的ng-model值显示为选定项目，即使它没有任何选项。（在编辑模式下）

有关如何做到这一点的任何想法？请轻描淡写

以下是DISTRICT的代码选择

                            <select class="form-control" name="district" id="field_district" ng-model="vm.apeksha.district" required 
                        ng-change="vm.updateblocks(vm.apeksha.district)"
                        ng-options="x.malDistName as x.malDistName for x in vm.masterDistricts " >

以下是VILLAGE选择输入项

的代码

                   <select class="form-control" name="village" id="field_village" ng-model="vm.apeksha.village" 
                            ng-options="village.M as village.M for village in vm.villagelist track by village.M"
                            required >
                            <option value="{{ vm.apeksha.village }}">{{ vm.apeksha.village }}</option>
                                    </select>

即使“vm.apeksha.village”上有值，也不显示选项项目

在控制器中，我们有一个使用工厂更新每个DISTRICTS对应的数据列表的功能。这是他的控制器代码

      /**
       * Update dropdown boxes of VILLAGES, THALUKS, PO AND BLOCS
       * based on district selection
       */
    vm.updateblocks = function(districtName) {
        vm.blockslist = masterDataPopulator.getBlocksForDistrict(districtName);
        vm.postofficelist = masterDataPopulator.getPostOfficesForDistrict(districtName);
        vm.villagelist = masterDataPopulator.getVillagesForDistrict(districtName);
        vm.thalukList = masterDataPopulator.getTaluksForDistrict(districtName);

      };

有什么办法吗？

Answer 1

我建议您在这种情况下使用ng-options而不是使用ng-repeat代码的<option>。

以上是类别列表。选择一个类别将加载下拉列表，其子类别如下所示，

分类

<select class="home_search_select" name="d1" ng-model="selectedd1" ng-change="homeChanged()" ng-options="cat as cat.category_name for cat  in categorydata track by cat.category_id" id="d1">
      <option ng-value="">Select Category</option>
    </select>

子类别

<select class="home_search_select" name="d2" id="d2" ng-model="selectedd2" ng-options="subcat.ID as subcat.Name for subcat in selectedd1.Subcategory track by subcat.ID">
      <option class="home_search_select" value="">Select Sub Category</option>
</select>

选择第一个时，将值绑定到ng-change事件中第二个下拉列表的ng模型

$scope.homeChanged=function(){
    console.log($scope.selectedd1)
  }
  $scope.selectedd2 ={
      "Name": "Two Wheeler",
      "ID": "1"
    };

<强> LIVE DEMO

ng-options将模型值设置为空白列表中的选定项

1 个答案: