如何使用Angularjs级联下拉？ [英] How to make cascading Dropdown using Angularjs?

问题描述

与子模型的移动品牌在这里我已经加入列表。
我的意料：
列出了多个times.how 1.here诺基亚和三星HTC可我避免列表 - 重复相同的名称
2，当我选择第一个下拉列表中诺基亚，一是新的下拉应该在第一个下拉它应该显示诺基亚品牌型号列表。如果我选​​择第一个下拉列表中的HTC，一是新的下拉应该在第一个下拉它应该显示HTC品牌型号list.help我出这个

Here i have Added list of mobile brand name with submodels. my expectation: 1.here nokia and samsung htc listed multiple times.how can i avoid same name repeated in list
2.when i select nokia in first dropdown list,one new dropdown should come under first dropdown it should show nokia brand model list .if i select htc in first dropdown list,one new dropdown should come under first dropdown it should show htc brand model list.help me out for this

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 code

html code

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

演示

推荐答案

添加角UI过滤器：

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

首先列出了不同的品牌有：

First list shows distinct brands:

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

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

Second list filters by brand:

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

的jsfiddle

这篇关于如何使用Angularjs级联下拉？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！