javascript - AngularJS (Material) - Refreshing data in md-list after adding new object using md-dialog -
i'm new whole angular world, yesterday ran problem cannot seem fix. prototype i'm creating simple task application enables user create, view , delete tasks. new task can created clicking button opens dialog. information can given in , clicking "add task" task gets added database.
the problem is, after dialog closes md-list, displays list of items, not refresh show newly added task. did try using "tack by" option ng-repeat, did not work.
i got information question: http://stackoverflow.com/questions/27874976/update-a-md-list-dynamically-from-angular
the code i'm using display tasks 1 (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 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 dialog looks 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 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 controller looks 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 wondering if me problem.
in advance!
you pushing task tasks list in wrong scope.
following should work 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);
Comments
Post a Comment