3

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!

Splaktar
  • 5,506
  • 5
  • 43
  • 74
Robin Hermans
  • 1,579
  • 1
  • 24
  • 52

1 Answers1

3

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);
atinder
  • 2,080
  • 13
  • 15
  • Thanks, I managed to fix the problem with your solution. Just a sidenote: while implementing the solution I saw that the hide function does not allow more than one parameter. If I insert two it loses the second parameter. Is this correct? – Robin Hermans Jul 14 '15 at 11:03
  • 1
    yes in order to pass multiple tasks you can do something like this `$mdDialog.hide([task1, task2, task3]);` – atinder Jul 14 '15 at 12:02