AngularJS dropdown 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 it difficult to use together. can anyone have an idea on how to use both together (dropdownlist + treeview)

Answer 1

You can use a simple control. I hope you group the values ​​by some property. Suppose you have the 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 the "type" field and display the treeview drop-down menu as follows:

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

https://docs.angularjs.org/api/ng/directive/ngOptions