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

Question

我在这里使用 ng-options 有不同的情况

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

我有 SELECT DISTRICTS 和 VILLAGES 的输入类型。使用 DISTRICT 选择的 ng-change 事件基于 DISTRICT 选择填充 VILLAGES 选择。这在 NEW 模式下运行良好。

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

我仍然想将 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 而不是带有<option> 标签的ng-repeat。

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

类别

<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-model

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

LIVE DEMO