AngularJS:根据第一个选择下拉列表的选择填充第二个选择下拉列表

时间:2013-10-11 11:33:30

标签: html angularjs drop-down-menu

我有一组选择下拉菜单,我试图根据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.name Person填充第二个选择 - 下拉列表targerSet1

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

sourceList.name Car填充第二个选择 - 下拉列表targerSet2

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

1 个答案:

答案 0 :(得分:7)

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

<强>选择

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

<强>控制器

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