AngularJS dropdownlist with treeview

Question

I am new to angularjs, i want to use dropdownlist with treeview structure. i used both dropdownlist and treeview control separately but find difficulty in using together. can anyone have idea about how to use both together(dropdownlist+treeview)

i want this kind of control:- codeproject.com/KB/ThirdParty/862784/TelerikTV2.PNG — Azad Shaikh
– Azad Shaikh, Commented May 23, 2015 at 4:53
Treeview and Grouped Select are quite different things (treeview typically has expand/collapse and multiple levels). The image you linked to is simply a select with grouping. — Phil Degenhardt
– Phil Degenhardt, Commented May 23, 2015 at 7:53

Yashika Garg · Accepted Answer · 2015-05-23 05:24:58Z

2

You can use simple select control. I hope you are grouping values by some property. Lets say you have following data structure:

  $scope.data = [
      {
          id: 1,
          value: "Cat",
          type: "Animal"
      },
      {
          id: 2,
          value: "Dog",
          type: "Animal"
      },
      {
          id: 3,
          value: "Lion",
          type: "Animal"
      },
      {
          id: 4,
          value: "Parrot",
          type: "Bird"
      },
      {
          id: 5,
          value: "Sparrow",
          type: "Bird"
      },
  ];

You can group your data by "type" field and show a treeview dropdown as follows:

  <select ng-options="obj.value group by obj.type for obj in data track by $index"></select>

For more details you can look at https://docs.angularjs.org/api/ng/directive/ngOptions

edited May 23, 2015 at 5:24

answered May 23, 2015 at 5:16

Yashika Garg

2,3662 gold badges16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Azad Shaikh Over a year ago

Yashika i have one more dout... using your solution it will display like tree structure but it wont allow me to click main parent i.e (type)... basically my requirement is like if i select main parent then all its children also selected. e.g. in this case if i select Animal automatically all children of animal should be selected

Yashika Garg Over a year ago

I think for this, you have to manually add one record for parent category and write code to select all if Parent is selected. For example, in $scope.data, put first record as {id:0, value: "Animal", type: "Animal"} and keep a watch on what is selected. If selected is "Animal", select all - add all animal type objects in selectedData array

priya vyas Over a year ago

how to make a three level structure??

Collectives™ on Stack Overflow

AngularJS dropdownlist with treeview

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related