Javascript 如何使用Angularjs制作级联下拉菜单？

在这里，我添加了带有子模型的移动品牌名称列表。 我的期望： 1.此处诺基亚和三星htc多次列出。如何避免在列表中重复相同的名称

---

2.当我在第一个下拉列表中选择诺基亚时，一个新的下拉列表应位于第一个下拉列表下，它应显示诺基亚品牌型号列表。如果我在第一个下拉列表中选择htc，一个新的下拉列表应位于第一个下拉列表下，它应显示htc品牌型号列表。请帮我解决此问题

angular.module('myApp', [])
    .controller("myCntrl", function ($scope) {

    $scope.items= [{


        id: "986745",
        brandname: "Nokia",
        modelname: "Lumia 735"

    }, {

        id: "896785",
        brandname: "Nokia",
        modelname: "Asha 230"
    }, {

        id: "546785",
        brandname: "Nokia",
        modelname: "Lumia 510"
    },
    {

        id: "144745",
        brandname: "Samsung",
        modelname: "50% offer for break fast"
    },

    {

        id: "986980",
        brandname: "Samsung",
        modelname: "Galaxy A5"
    },
    {

        id: "586980",
        brandname: "Samsung",
        modelname: "Galaxy Note 4 Duos"
    },
    {

        id: "986980",
        brandname: "Samsung",
        modelname: "Galaxy A5"
    },
    {

        id: "586980",
        brandname: "Samsung",
        modelname: "Galaxy Note 4 Duos"
    },

    {

        id: "232980",
        brandname: "Htc",
        modelname: "One X9"
    },
    {

        id: "456798",
        brandname: "Htc",
        modelname: "Desire 820"
    }

    ]





})
//]]>

html代码

<div ng-app="myApp">
    <div ng-controller="myCntrl">
        <label>List Of Brand</label>

        <label for="singleSelect"> select: </label>
        <select ng-model="selectedItem">
        <option ng-repeat="item in items " value="{{item.id}}">{{item.brandname}}</option>
        </select>




    </div>

</div>

品牌列表
选择：
{{item.brandname}}

---

通过修改数据模型，可以轻松处理重复记录

{ 
   brandName :
   {
     modelName:"", id: ""
   }
 }

e、 g

---

看看摆弄新的数据模型吧。使用此选项，将删除列表中的重复项。对于第二个下拉列表，您仍然必须处理第一个下拉列表中的单击事件

您必须构建一个递归体系结构：

<li class="dropdown-submenu" data-ng-repeat="g in requests.reduceGroup"
        data-ng-init="parent = requests.reduceGroup; full=''"
        data-ng-if="g.groups" data-ng-include="'app/core/templates/subdropdown.html'">
</li>

还有subdropdown.html文件：

<ul class="dropdown-menu">
 <li data-ng-repeat="g in g.groups"
  data-ng-init="parent = $parent.$parent.g; full=requests.fullGroup(full, parent.name)"
  data-ng-class="{'dropdown-submenu': g.groups}"
  data-ng-include="'app/core/templates/subdropdown.html'"></li>
</ul>
<a href="" data-ng-click="requests.editGroup(requests.fullGroup(full, g.name))">{{g.name}}</a>

正如您在子下拉列表中看到的，我递归调用子下拉列表html来创建级联下拉列表

我希望这将对您有所帮助。

添加角度ui过滤器：

angular.module('myApp', ['ui.filters'])

第一个列表显示了不同的品牌：

ng-repeat="item in items | unique: 'brandname'"

按品牌列出的第二个过滤器列表：

ng-repeat="item in items | filter: {brandname: selectedBrand}"

---

您可以在下拉菜单中使用ng选项。我已添加了我的小提琴，请更新该小提琴。如果我更改$scope.items，会对我有帮助吗？这对你合适吗？不，不，不要改变，我只得到这样的数据。但是如果你能改变这一点，那么当我在第一个下拉列表中选择诺基亚时，很容易做到这一点。第一个下拉列表下应该有一个新的下拉列表，它应该显示诺基亚品牌型号列表。如果我在第一个下拉列表中选择htc，一个新的下拉列表应该在第一个下拉列表下，它应该显示htc品牌型号列表。请帮我解决这个问题。我如何为该下拉列表设置搜索框过滤器哇。看起来好多了。我也做了同样的事，但我不知道出了什么问题。我的小提琴是：我用的东西是：。我对Angular是个新手，但我只是想知道它是如何工作的，为什么不工作。也许你需要更强大的ui组件。你能查一下吗

ng-repeat="item in items | filter: {brandname: selectedBrand}"