CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangularjs-materialangular-nglist
Robin Hermans
Robin Hermans

Reputation: 1599

AngularJS (Material) - Refreshing data in md-list after adding new object using md-dialog

I'm fairly new to the whole Angular world, but yesterday I ran into a problem I cannot seem to fix. As a prototype I'm creating a simple Task application which enables the user to create, view and delete tasks. A new task can be created by clicking a button which opens the dialog. Some information can be given in and by clicking "add task" the task gets added to the database.

The only problem is, after the dialog closes the md-list, which displays a list of items, does not refresh to show the newly added task. I did try using the "tack by" option for ng-repeat, but that did not work.

I got the information from this question: http://stackoverflow.com/questions/27874976/update-a-md-list-dynamically-from-angular

The code I'm using to display the tasks is this one (Simplified)

<html lang="en" ng-app="taskApp">
<head></head>
<body>
    <div ng-controller="TaskController">
        <md-list>
            <md-list-item ng-repeat="task in tasks track by task.id">
                <md-checkbox ng-model="task.checked" ng-change="updateTask(task)" aria-label="Complete Task"></md-checkbox>
                <p>{{ task.title }}</p>
            </md-list-item>
        </md-list>
    </div>
</body>
</html>

The template for the dialog looks like this:

<md-dialog aria-label="Create new task">
    <md-content>
        <md-card class="card-padding">
            <form ng-submit="addTask(newTitle)">
                <h2 class="md-title">Add a new task</h2>
                <div layout="row">
                    <md-input-container flex>
                        <label>Title</label>
                        <input ng-model="newTitle">
                    </md-input-container>
                </div>
                <div layout="row">
                    <md-input-container flex>
                        <md-button class="md-raised md-primary" type="submit" ng-disabled="!newTitle || !newDescription">Add Task</md-button>
                    </md-input-container>
                </div>
            </form>
        </md-card>
    </md-content>
</md-dialog>

And the Controller looks like this:

(function(angular) {
    var TaskController = function($scope, $mdDialog, Task) {
        Task.query(function(response) {
            $scope.tasks = response ? response : [];
        });

        $scope.addTask = function(title) {
            new Task({
                title: title,
                checked: false
            }).$save(function(task) {
                $scope.tasks.push(task);
            });
            $scope.newTitle = "";
            $mdDialog.hide();
        };

        $scope.showDialog = function(ev) {
            $mdDialog.show({
                controller: TaskController,
                templateUrl: 'taskdialog.tmpl.html',
                parent: angular.element(document.body),
                targetEvent: ev,
            });
        };

        $scope.updateTask = function(task) {
            task.$update();
        };

        $scope.deleteTask = function(task) {
            task.$remove(function() {
                $scope.tasks.splice($scope.tasks.indexOf(task), 1);
            });
        };
    };

    TaskController.$inject = ['$scope', '$mdDialog', 'Task'];
    angular.module("taskApp.controllers").controller("TaskController", TaskController);
}(angular));

So I was wondering if anyone could help me with this problem.
Thanks in advance!

Upvotes: 3

Views: 5726

Answers (1)

atinder
atinder

Reputation: 2090

you are pushing the task into tasks list in wrong scope.

following should do the work for you. while showing dialog.

$mdDialog.show({
  controller: TaskController,
  templateUrl: 'taskdialog.tmpl.html',
  parent: angular.element(document.body),
  targetEvent: ev,
}).then(function(task){
  $scope.tasks.push(task);
});

while hiding dialog.

$mdDialog.hide(task);

Upvotes: 3

Related Questions