Question

这里我添加了子模型的移动品牌名称列表。我的期望： 1.诺基亚和三星htc多次列出。我可以避免在列表中重复相同的名称 2.当我在第一个下拉列表中选择诺基亚时，一个新的下拉列表应该在第一个下拉列表中显示它应该显示诺基亚品牌型号列表。如果我在第一个下拉列表中选择htc，一个新的下拉列表应该在第一个下拉列表中显示它应该显示htc品牌型号list.help我这个

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>

demo

Answer 1

添加角度ui过滤器：

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

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

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

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

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

jsfiddle

Answer 2

您必须构建一个递归架构：

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

正如你在subdropdown中看到的那样，我递归调用subdropdown html创建一个级联下拉列表。

我希望这会对你有帮助。

Answer 3

使用修改后的数据模型，可以轻松处理重复记录

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

例如

{
    Nokia:[{
        id: "986745",
        modelname: "Lumia 735"
    },
    {
        id: "986746",
        modelname: "X 2"
    }]
}

查看新数据模型here。使用列表中的重复项将被删除。对于第二个下拉列表，您仍然需要从第一个下拉列表中处理点击事件。

如何使用Angularjs进行级联下拉？

3 个答案: