Cascade Lists by Using ng-repeat

The following example demonstrates how to use the ng-repeat Angular directive to add extra drop-down lists on a parent selection.

Every new child is bound with distinct values.

Important

When applied, the ng-repeat directive demonstrates some limitations. For more information on this issue, refer to the notes on ng-repeat.

    <script type="text/javascript">
      function getResource(val){
        return val;
      }
      angular.module("test", ["kendo.directives"]);

      angular.module("test").controller("testController", ["$scope", function($scope){
        $scope.hierarchyFieldIds = new kendo.data.ObservableArray([]);
        $scope.hierarchyFields = new kendo.data.ObservableArray([]);
        $scope.placeholder = [];    // needed so that ng-repeat does not conflict with k-ng-model and cause a $rootScope:inprog error.

        $scope.fields = [
          { Name: 'Root', FieldMappings: null, HierarchyOrdinal: null },
          { Name: 'Level 2', FieldMappings: null, HierarchyOrdinal: null },
          { Name: 'Level 3', FieldMappings: null, HierarchyOrdinal: null },
          { Name: 'Value', FieldMapipngs: null, HierarchyOrdinal: null },
          { Name: 'Value 2', FieldMapipngs: null, HierarchyOrdinal: null },
          { Name: 'Value 3', FieldMapipngs: null, HierarchyOrdinal: null }
        ];

        $scope.availableFields = function (curField) {
          return $.map($scope.fields, function (field, idx) {
            var match = $.map($scope.hierarchyFieldIds, function (hf) {
              if (String(hf.Id) === String(idx)) {
                return hf;
              }
            });

            if (!(match && match.length) || (curField && String(match[0].Id) === String(curField.Id))) {
              //return $.extend({ Id: idx }, field);
              var fieldId = field.Id;
              if (!fieldId) { fieldId = idx; }
              return { Id: fieldId, Name: field.Name };
            }
          });
        };

        $scope.hierarchyOptions = {
          change: function (ev) {
            var hierarchyLevel = this.element.attr("data-index");
            if (!hierarchyLevel) { return; }

            hierarchyLevel = Number(hierarchyLevel);
            if (isNaN(hierarchyLevel)) { return; }

            if (!this.value()) {
              $scope.hierarchyFields.splice(hierarchyLevel, 1);
              $scope.hierarchyFieldIds.splice(hierarchyLevel, 1);
            } else {
              $scope.hierarchyFieldIds[hierarchyLevel].Id = this.value();
            }

            for (var i = 0; i < $scope.hierarchyFields.length; i++) {
              $scope.hierarchyFields[i] = $scope.availableFields($scope.hierarchyFieldIds[i]);
            }
            // update data source for add row:
            $scope.remainingFields.data($scope.availableFields());
            $scope.$apply();
          }
        };

        $scope.remainingFields = new kendo.data.DataSource({ data: $scope.availableFields() });

        $scope.addHierarchyOptions = {
          dataSource: $scope.remainingFields,
          dataTextField: "Name",
          dataValueField: "Id",
          optionLabel: " ",
          change: function (ev) {
            if (this.value()) {
              var id = Number(this.value());
              if (isNaN(id)) { return; }

              var field = $.map(this.dataSource.data(), function (field) {
                if (field.Id === id) { return field; }
              });

              if (field && field.length) {
                field = field[0];

                $scope.hierarchyFieldIds.push({ Id: String(field.Id), Name: field.Name });
                $scope.hierarchyFields.push([]);

                for (var i = 0; i < $scope.hierarchyFields.length; i++) {
                  $scope.hierarchyFields[i] = $scope.availableFields($scope.hierarchyFieldIds[i]);
                }
              }
              // update list, so that the selected item cannot be selected again:
              $scope.remainingFields.data($scope.availableFields());

              // update placeholder used by ng-repeat.
              $scope.placeholder.push("");
              // clear selection
              this.value("");

              // refresh view.
              $scope.$apply();
            }
          }
        };
      }]);
    </script>
  <div ng-app="test" ng-controller="testController">
    {{hierarchyFieldIds}}
    <div ng-repeat="field in placeholder track by $index">
      <select kendo-dropdownlist
              data-index="{{$index}}"
              k-data-source="hierarchyFields[$index]"
              k-data-text-field="'Name'"
              k-data-value-field="'Id'"
              k-ng-model="hierarchyFieldIds[$index]"
              k-option-label="' '"
              k-options="hierarchyOptions"></select>
    </div>
    <div>
      <select kendo-dropdownlist
              k-options="addHierarchyOptions"></select>
    </div>
  </div>

See Also

• DropDownList JavaScript API Reference
• How to Automatically Adjust the Width of a DropDownList
• How to Create DropDownLists with Long Items
• How to Detect Wrapper Focus Events
• How to Move the Group Label on Top of Items
• How to Prevent Popup Closure on Scroll
• How to Remove Items
• How to Set DataSource Dynamically
• How to Update MVVM Bound Models on Load
• How to Validate DropDownLists by Using Required Attributes

For more runnable examples on the Kendo UI DropDownList, browse its How To documentation folder.