user1008531 user1008531 - 6 months ago 75
AngularJS Question

update ngrepeat without refreshing dom

This problem occurred many times in my code, but a simple trick fixed it any time, besides now. I have a list of object pulled from database, listed in a table, with a button I open a modal to create a new object, add that to the database and also return the new object back to the parent controller. In the success function of the modal that is called after closing the modal, the new object is added to the list. Previously the dom updated itself without a refresh of the page, but now it doesn't. I read something about track by which tracks changes in a list, addition delete and changes, but no. After a refresh, the dom is updated, but is should be possible without. The list is called "vm.allTasks"

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--12-col" ng-controller="taskController as vm">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Taak beschrijving</th>
<th class="mdl-data-table__cell--non-numeric">Opties</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in vm.allTasks track by task._id">
<td class="mdl-data-table__cell--non-numeric">{{task.description}}</td>
<td>
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class="material-icons">edit</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class="material-icons" ng-click="vm.removeTask(task._id, $index)">delete</i>
</button>
</td>
</tr>
</tbody>
</table>

Answer

The code above is part of an html partial. So this file and 2 others are included in a bigger html file. But they share the same controller, here was my mistake. I gave the big html file a controller, but did the same in the partial. So there where 2 scopes for this controller, that's why my data was not updated. Because I append a controller in my route I don't even have to mention in my html view.

<md-content>
    <md-tabs md-dynamic-height="" md-border-bottom="">
        <md-tab label="Taken per gebruiker">
            <md-content class="md-padding">
                <div ng-include="'app/components/tasks/partials/tasksPerUser.html'" class="mdl-grid mdl-cell--12-col"> </div>
            </md-content>
        </md-tab>
        <md-tab label="Alle taken">
            <md-content class="md-padding">
                <div ng-include="'app/components/tasks/partials/allTasks.html'" class="mdl-grid mdl-cell--12-col"> </div>
            </md-content>
        </md-tab>
        <md-tab label="Taak paketten">
            <md-content class="md-padding">
                <div ng-include="'app/components/tasks/partials/taskGroups.html'" class="mdl-grid mdl-cell--12-col"> </div>
            </md-content>
        </md-tab>
</md-content>
<div class="mdl-speed-dial mdl-speed-dial--bottom-fixed" style=" position: fixed;
    bottom: 1em;right: 1em;">
    <div class="mdl-speed-dial__options">
        <div class="mdl-speed-dial__option">
            <p class="mdl-speed-dial__tooltip">Voeg task groep toe</p>
            <button ng-click="vm.addTaskGroup($event)" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                <i class="material-icons">group_work</i>
            </button>
        </div>
        <div class="mdl-speed-dial__option">
            <p class="mdl-speed-dial__tooltip">Voeg task toe</p>
            <button ng-click="vm.addTask($event)" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                <i class="material-icons">content_paste</i>
            </button>
        </div>
    </div>
    <button class="mdl-speed-dial__main-fab mdl-speed-dial__main-fab--spin mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
        <i class="material-icons mdl-speed-dial_main-fab-icon mdl-speed-dial_main-fab-icon--primary">add</i>
        <i class="material-icons mdl-speed-dial_main-fab-icon mdl-speed-dial_main-fab-icon--secondary">create</i>
    </button>
</div>

Comments