ng-options将ng-model值设置为空白列表中的选定项 [英] ng-options Set ng-model value as selected item in blank list

问题描述

我这里有ng-options

I have a different case here with ng-options

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

I have two modes for my app. New mode and Edit mode

我有DISTRICTS和VILLAGES的SELECT输入类型.使用DISTRICT选择的ng-change事件，基于DISTRICT选择填充VILLAGES选择.在NEW模式下可以正常工作.

I have SELECT input types for DISTRICTS and VILLAGES. The VILLAGES select is populated based on DISTRICT selection using ng-change event of DISTRICT select. This works fine in NEW mode.

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

But when in EDIT mode, the DISTRICT is correctly showing the value of ng-model. But the VILLAGE select input item is not showing the ng-model value. This is because, the village select does not have any items populated in it as the ng-change event of DISTRICT never triggers in EDIT mode.

我仍然想在下拉菜单中将VILLAGE的ng-model值显示为选定项，即使其中没​​有任何选项也是如此.(在编辑"模式下)

I still want to show the ng-model value of VILLAGE as selected item in the drop down, even if it does not have any options in it. (in EDIT mode)

如何做到这一点的任何想法?请说明一下

Any ideas of how this can be done? Please shed some light

下面是DISTRICT select的代码

Here the code below for DISTRICT select

                            <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输入项的代码

Here is the code for VILLAGE select input item

                   <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"上有值，也不会显示该选项项目

The option item is not shown even if there is value on "vm.apeksha.village"

在控制器中，我们有一个函数，该函数使用工厂来更新与每个DISTRICTS相对应的数据列表.这是控制器代码

In controller, we have a function which uses a factory to update the list of data corresponding to each DISTRICTS. Here is he code of controller

      /**
       * 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);

      };

有什么方法吗?

推荐答案

在这种情况下，建议您使用 ng-options ，而不要使用 ng-repeat code>< option> 标记.

I suggest you to go for ng-options in this case instead of ng-repeat with <option> tag.

以上是类别列表.选择一个类别将为下拉菜单加载以下子类别，

The above is the list of category. Selecting one category will load the dropdown with the subcategories as below,

类别

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

SubCategory

SubCategory

<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

When the first one is selected, bind the value to the ng-model of second dropdown in the ng-change event

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

实时演示

LIVE DEMO

这篇关于ng-options将ng-model值设置为空白列表中的选定项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！