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

Posted 2023-03-16

【中文标题】ng-options 将 ng-model 值设置为空白列表中的选定项

【英文标题】：ng-options Set ng-model value as selected item in blank list

【发布时间】：2018-02-18 02:12:11

【问题描述】：

我在这里使用 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);

      ;

有什么办法吗？

【问题讨论】：

这是一个好故事，但如果您没有发布代码，没有人可以帮助您。请发布代码 sn-p 示例或更好的代码 - 演示您的 ptoblem 的演示

添加了代码。请看一下

它唯一的 html 部分，请用数据发布控制器

对不起。我现在也更新了控制器代码。请看一下

提供的答案没有解决问题。有什么帮助吗？

【参考方案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

【讨论】：

但是，我只使用 ng-options。我没有在这里使用 ng-repeat。此外，在 EDIT 模式期间，不会发生 ng-change 事件，因为用户可能不会更改 DISTRICT，但仍必须显示 VILLAGE，这已在将其添加为新记录时指定（新模式）

对此有什么帮助吗？