ui-tree-node не перетаскивается и ошибка не может прочитать свойство '0' с нулевым значением

Question

ui-tree-node не перетаскивается и ошибка не может прочитать свойство '0' с нулевым значением

0

Я получаю эту ошибку; Cannot read property '0' of null (для "0", "1", "2", "3" и т.д.) Один раз за каждый из 24 часов в мой день. Затем снова для строк "8", "9", "10" и "11", где у меня есть события в календаре.

Это мой шаблон дневного календаря

<table ui-tree="treeOptions">
    <tbody>
    <!-- Builds Day View with one <tr> for each hour(24 hrs) in rows model --> 
    <tr ng-repeat="tm in rows track by $index" ng-model="rows" ui-tree-nodes="">
        <td class="calendar-cell" ui-tree-node>
            <!-- hourTouch() counts the touch events, once shows <p>Signup</p>, twice  -->
            <!-- shows <div class="finish-time"> which is my draggable element -->
            <!-- tm.events is an array of objects with the event detail properties -->
            <div class="add_event_shade" 
                    ng-if="tm.events" 
                    on-touch="hourTouch($event)"
                    ng-model="tm.events"
                    ui-tree-nodes="">
                <p style="display:none;" 
                     ng-model="volunteerStart">
                     Signup
                </p>
                <div class="finish-time"
                        style="display:none";
                        ui-tree-node>
                        Finish: {{ displayEnd}}
                </div>
            </div>
            <div ng-class="{'calendar-event-wrap': tm.events}"
                    ng-show="tm.events">
                <!-- adds events to the calendar day view -->
                <div ng-repeat="displayEvent in tm.events" 
                       class="calendar-event"
                       ng-click="eventSelected({event:displayEvent.event})"
                    <div class="calendar-event-inner"></div>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
</table>

в моем контроллере у меня есть логика, описанная в моих комментариях html, и полный набор $scope.treeOptions = { accept, beforeDrag, removed т.д., как показано в документах.

Я пропустил что-то, что мне нужно, чтобы делать контрольную часть, или я устанавливаю атрибуты ui-tree неправильно в моем шаблоне?

Brad W 02 июнь 2016, в 22:45

Источник

Теги:

ionic-framework

angularjs

angularjs-directive

angular-ui-tree

2 ответа

Ещё вопросы

sujithklr93 · Answer 1 · 2017-04-21T08-56-00.000Z

<table ui-tree="treeOptions">
<tbody ui-tree-nodes data-max-depth="2" ng-model="row">
<!-- Builds Day View with one <tr> for each hour(24 hrs) in rows model --> 
<tr ng-repeat="tm in rows track by $index" ng-model="rows" ui-tree-node>
    <td class="calendar-cell">
        <!-- hourTouch() counts the touch events, once shows <p>Signup</p>, twice  -->
        <!-- shows <div class="finish-time"> which is my draggable element -->
        <!-- tm.events is an array of objects with the event detail properties -->
        <div class="add_event_shade" 
                ng-if="tm.events" 
                on-touch="hourTouch($event)"
                ng-model="tm.events"
                ui-tree-nodes="">
            <p style="display:none;" 
                 ng-model="volunteerStart">
                 Signup
            </p>
            <div class="finish-time"
                    style="display:none";
                    ui-tree-node>
                    Finish: {{ displayEnd}}
            </div>
        </div>
        <div ng-class="{'calendar-event-wrap': tm.events}"
                ng-show="tm.events">
            <!-- adds events to the calendar day view -->
            <div ng-repeat="displayEvent in tm.events" 
                   class="calendar-event"
                   ng-click="eventSelected({event:displayEvent.event})"
                <div class="calendar-event-inner"></div>
            </div>
        </div>
    </td>
</tr>
</tbody>

настройки параметров следующим образом.

    $scope.treeOptions= {
        accept: function(sourceNodeScope, destNodesScope, destIndex) {
            return sourceNodeScope.$parent.$id === destNodesScope.$id;
        },
        dropped: function(event) {
          return true;
        },
        beforeDrop: function(event) {
           return true;
        }
    };

Формат данных следующим образом

   $scope.row = [{id:'', ..... //JSON data }]

Brad W · Answer 2 · 2016-06-03T13-34-00.000Z

Мне пришлось переместить ng-model="rows" ui-tree-nodes="" из первого <tr> до <tbody>. А затем ui-tree-node из первого <td> до родительского <tr>

Затем еще дальше переместите ng-model="tm.events" ui-tree-nodes="" в <div class="add_event_shade"> до родительского <td> и измените ng-model="tm.events" к ng-model="rows". HTML показан ниже.

это исправляет ошибку, показанную выше, и я могу перетащить элемент. Хотя у меня все еще есть другие проблемы с перемещенным элементом, перемещающим мои события в представлении, перетаскиваемый элемент не отображается, поскольку он перетаскивается, и я не могу удалить перетащенный элемент. Но я думаю, что это вещи для другого вопроса.

<table ui-tree="treeOptions">
    <tbody ng-model="rows" ui-tree-nodes="">
    <!-- Builds Day View with one <tr> for each hour(24 hrs) in rows model --> 
        <tr ng-repeat="tm in rows track by $index" ui-tree-node>
            <td class="calendar-cell" ng-model="rows" ui-tree-nodes="">
            <!-- hourTouch() counts the touch events, once shows <p>Signup</p>, twice  -->
            <!-- shows <div class="finish-time"> which is my draggable element -->
            <!-- tm.events is an array of objects with the event detail properties -->
            <div class="add_event_shade" 
                 ng-if="tm.events" 
                 on-touch="hourTouch($event)">
                <p style="display:none;" 
                   ng-model="volunteerStart">
                   Signup
                </p>
                <div class="finish-time"
                     style="display:none";
                     ui-tree-node>
                     Finish: {{ displayEnd}}
                </div>
            </div>
            <div ng-class="{'calendar-event-wrap': tm.events}"
                 ng-show="tm.events">
                    <!-- adds events to the calendar day view -->
                    <div ng-repeat="displayEvent in tm.events" 
                         class="calendar-event"
                         ng-click="eventSelected({event:displayEvent.event})"
                        <div class="calendar-event-inner"></div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>