在AngularJS中为依赖下拉菜单选择默认值[重复]

Posted 2023-02-21

【中文标题】在AngularJS中为依赖下拉菜单选择默认值[重复]

【英文标题】：Selecting a default value for dependant dropdowns in AngularJS [duplicate]

【发布时间】：2017-12-20 16:46:07

【问题描述】：

我需要为两个相关的下拉菜单预先选择默认值。因此，在页面加载时，下拉菜单应显示类似“Automative”的内容，并选择了“Two Wheelers”。 （并且不使用 selected 属性，默认值必须通过 $scope 加载） 以下是工作下拉菜单的 Plunkr 链接。

http://plnkr.co/edit/3Xrpb4jBziWNZE9JVfts?p=preview

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

<select class="home_search_select" name="d2" id="d2" ng-disabled="!selectedd1" ng-model="selectedd2" ng-options="subcat.ID as subcat.Name for subcat in ((categorydata|filter:'category_id':selectedd1)[0].Subcategory) track by subcat.ID">
  <option class="home_search_select" value="">Select Sub Category</option>
</select>

【参考方案1】：

如下为 selected1 赋值

$scope.selectedd1= 
    "category_name": "Automotive",
    "category_id": "1",
    "Subcategory": [
      "Name": "Two Wheeler",
      "ID": "1"
    , 
      "Name": "Four Wheeler",
      "ID": "2"
    , 
      "Name": "Heavy Moving Vehicles",
      "ID": "3"
    , 
      "Name": "Automobile Related",
      "ID": "4"
    ]
  ;

在第二个下拉菜单中修改 ng-options

<select class="home_search_select" name="d2" id="d2"
    ng-disabled="!selectedd1" 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 指令

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

注意：ng-options 改为包含整个对象

Updated Plunker

【讨论】：

不工作，子类别下拉列表为空，更改时也已损坏。我需要它像原版一样工作。

只需将$scope.selectedd2 = $scope.selectedd1.Subcategory[0];（而不是$scope.selectedd2 = "1";）添加到@Aravind 的答案中，它应该可以工作

@Andriy 如果可行，请点赞

不工作了...请再次检查我的查询。我需要选择两个下拉菜单。就像最初出现的带有“Two Wheeler”的“汽车”或带有“鞋类”的“时尚”。当我再次更改主要类别时，它应该填充所有匹配值并选择“选择子类别”的子类别。跨度>

@Aravind，它不起作用，如果你添加到你的代码中它应该可以工作 $scope.selectedd2 = $scope.selectedd1.Subcategory[0]; 这是固定的 plunker - plnkr.co/edit/MfThyBndm6zRLxmtqe7p?p=preview