How to make cascading Dropdown using Angularjs?

Question

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

Answer 1

Add angular ui filter:

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

Answer 2

With modified data model it will be easy deal with duplicate records

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

e.g

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

Check out fiddle with the new data model here. Using this duplicates from the list are removed. For second dropdown you will have still have to handle click event from first dropdown.

Answer 3

You have to build a recursive architecture :

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

and there the subdropdown.html file :

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

As you can see in the subdropdown I call recursively the subdropdown html to create a cascading dropdown.

I hope that will help you.