Arrays 如果提供的数组具有使用Angular.js的嵌套数组，则显示HTML元素

我想用数组填充一个下拉列表，如果用户选择了一个具有嵌套数组的选项，那么我只想显示另一个下拉列表并用该子数组填充它，依此类推

然后用链的最后一个值填充隐藏字段

---

如何使用Angular.js实现这一点？

在

select

标记中使用

ng change

指令，并在

ng change

中调用检查场景的函数

如果提供阵列数据，则可以更准确地给出答案

我知道这种方法是长期的。但它有助于保持代码的整洁

加价

<select ng-model="selectedItem" ng-options="item.name for item in items" ng-change="doesItemHaveSubArray(selectedItem)"></select>

<div ng-if="subItem">
  <select ng-model="selectedSubItem" ng-options="item.name for item in subItem"></select>
</div>

---

您可以使用

ng show

有条件地显示/隐藏第二个下拉列表

代码可以查看/测试

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    {name:'item1'},
    {name:'item2', subItems: [
      {name:'sub item 1'},
      {name:'sub item 2'}]}];
});

标记：

<p>
  <select ng-model="selectedItem" ng-options="i.name for i in items"></select>
</p>
<p ng-show="selectedItem.subItems">
  <select ng-model="selectedSubItem" ng-options="i.name for i in selectedItem.subItems"></select>
</p>

这种方法很有效，但是当我从第二个下拉列表中选择任何内容时，它都会消失。你是对的，我将两个选择绑定到同一个ng模型，因此当第二个选择被更改时，它也会更改第一个选择。plnkr链接和应答都已更新。它是这样一个数组。。。项目=[{名称：'item1'}，{名称：'item2'，子项目：[{名称：'subitem1'}，{名称：'subitem2'}，子子项目：[{名称：'subitem1'}，{名称：'subitem2'}]}]；

<p>
  <select ng-model="selectedItem" ng-options="i.name for i in items"></select>
</p>
<p ng-show="selectedItem.subItems">
  <select ng-model="selectedSubItem" ng-options="i.name for i in selectedItem.subItems"></select>
</p>