Как преобразовать мою ручку в угловое дерево?

0

Я написал простую ручку с минимальной функциональностью для работы с деревом a-la Material Design. Но я не понимаю директивы и не могу написать правильный код для преобразования моих шаблонов в угловой плагин.

Как написать правильную угловую директиву для treeview с загрузкой и настройкой асинхронных узлов (показать/скрыть)? Основная проблема для меня теперь - ошибка с рекурсией шаблонов.

уценка

<script type="text/ng-template" id="treeview.html">
  <md-list-item>
    <p>{{ item.title }}</p>
    <md-icon class="material-icons md-secondary" ng-if="item.items" ng-click="toggleItems(item)">{{ item.expanded ? 'expand_less' : 'expand_more' }}</md-icon>
  </md-list-item>
  <md-list flex ng-if="item.items" ng-show="item.expanded">
    <div ng-repeat="item in item.items" ng-include="'treeview.html'"></div>
  </md-list>
</script>

<body layout="column" ng-cloak ng-app="app" ng-controller="MainCtrl" flex>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>TreeView emulation</h2>
    </div>
  </md-toolbar>

  <md-content flex class="md-padding">
    <md-list>
      <div ng-repeat="item in items" ng-include="'treeview.html'"></div>
    </md-list>
  </md-content>
</body>

Код JS

(function(A) {
  "use strict";

  var app = A.module('app', ['ngMaterial']),
    ids = 1;

  function getId() {
    return ids++;
  }

  function createItems(count) {
    var i, id, items = [];
    for (i = 0; i < count; i += 1) {
      id = getId();
      items.push({
        id: id,
        title: 'Item #' + id,
        items: id % 4
      });
    }
    return items;
  }

  app.controller('MainCtrl', ['$scope', function($scope) {

    $scope.items = createItems(6); // 6 штук хвати всем!

    $scope.toggleItems = function(item) {
      if (item.items) {
        if (A.isArray(item.items)) {
          item.expanded = !item.expanded;
        } else {
          item.items = createItems(Math.floor(Math.random(4)) + 3);
          item.expanded = true;
        }
      }
    };
  }]);
}(this.angular));
Теги:
treeview

1 ответ

0

Это то, что вы ищите?

Можно ли сделать вид дерева с угловым?

А также взгляните на это. Это может быть хорошей отправной точкой.

https://jimliu.github.io/angular-ui-tree/

  • 0
    Да, я видел эту ссылку и написал собственную директиву, но она не работает. Также я копирую код из этого JSFiddle [1], но это не директива. [1] jsfiddle.net/brendanowen/uXbn6/8

Ещё вопросы

Сообщество Overcoder
Наверх
Меню