草庐IT

html - Angular : Populate second select-dropdown based on choice of first select-dropdown

coder 2023-08-11 原文

我有一组选择下拉菜单,我试图根据 angularJS 中第一个选择下拉菜单的选择来填充第二个选择下拉菜单。我不知道如何真正开始。

我已准备好所有模型,但正在为动态人口而苦苦挣扎。

选择 1:

    <select ng-model="selectedSource" ng-options="source.name for source in sourceList">
       <option value="">-- Select item --</option>
    </select>

$scope.sourceList= [
    {
       "name":"Person",
       "has": ["a","b","c"]
    },
    {
       "name":"Car",
       "has": ["1","2","3"]
    }
];

我要达到的目标:

sourceList.namePerson 时,用 targerSet1 填充第二个选择下拉列表

$scope.targerSet1= [
   {
      "name":"King Julien"
   }
];

sourceList.nameCar 时,用 targerSet2 填充第二个选择下拉列表

$scope.targerSet2= [
   {
      "name":"RoyalMobile"
   }
];

最佳答案

您可以只使用第二个 ng-options 中第一个选择的绑定(bind)变量:

选择

<select ng-model="selectedSource" ng-options="source.name for source in sourceList">
    <option value="">-- Select item --</option>
</select>

<select ng-model="selectedItem" ng-options="item.name for item in selectedSource.suboptions">
    <option value="">-- Select item --</option>
</select>

Controller

$scope.sourceList = [
    {
       name: "Person",
       suboptions: [
           { name: "King Julien" }
       ]
    },
    {
       name: "Car",
       suboptions: [
           { name: "RoyalMobile" }
       ]
    }
];

关于html - Angular : Populate second select-dropdown based on choice of first select-dropdown,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19317146/

有关html - Angular : Populate second select-dropdown based on choice of first select-dropdown的更多相关文章

随机推荐