AngularJS (Material) - 使用 md-dialog 添加新对象后刷新 md-list 中的数据 [英] AngularJS (Material) - Refreshing data in md-list after adding new object using md-dialog
问题描述
我对整个 Angular 世界还很陌生，但昨天我遇到了一个似乎无法解决的问题.作为原型，我正在创建一个简单的任务应用程序，它使用户能够创建、查看和删除任务.单击打开对话框的按钮可以创建新任务.一些信息可以通过点击添加任务"来提供，任务被添加到数据库中.
唯一的问题是，对话框关闭后，显示项目列表的 md-list 不会刷新以显示新添加的任务.我确实尝试对 ng-repeat 使用tack by"选项，但是没有用.
我从这个问题中得到了信息:http://stackoverflow.com/questions/27874976/update-a-md-list-dynamically-from-angular
我用来显示任务的代码是这个(简化版)
<头></头><身体><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="完成任务"></md-checkbox><p>{{ task.title }}</p></md-list-item></md-list></html>
对话框的模板如下所示:
<md-内容><md-card class="card-padding"><form ng-submit="addTask(newTitle)"><h2 class="md-title">添加新任务</h2><div layout="row"><md-input-container flex><label>标题</label><输入 ng-model="newTitle"></md-input-container> <div layout="row"><md-input-container flex><md-button class="md-raised md-primary" type="submit" ng-disabled="!newTitle || !newDescription">添加任务</md-button></md-input-container>
</表单></md-card></md-content></md-dialog>
控制器看起来像这样:
(函数(角度){var TaskController = function($scope, $mdDialog, Task) {任务.查询(功能(响应){$scope.tasks = 响应?回复 : [];});$scope.addTask = 函数(标题){新任务({标题:标题，检查:错误}).$save(函数(任务){$scope.tasks.push(task);});$scope.newTitle = "";$mdDialog.hide();};$scope.showDialog = function(ev) {$mdDialog.show({控制器:任务控制器，templateUrl: 'taskdialog.tmpl.html',父级:angular.element(document.body),目标事件:ev，});};$scope.updateTask = 函数(任务){任务.$更新()；};$scope.deleteTask = 函数(任务){task.$remove(function() {$scope.tasks.splice($scope.tasks.indexOf(task), 1);});};};TaskController.$inject = ['$scope', '$mdDialog', 'Task'];angular.module("taskApp.controllers").controller("TaskController", TaskController);}(角));所以我想知道是否有人可以帮助我解决这个问题.
提前致谢！
您正在将任务推入错误范围的任务列表.
以下应该为您完成工作.显示对话框时.
$mdDialog.show({控制器:任务控制器，templateUrl: 'taskdialog.tmpl.html',父级:angular.element(document.body),目标事件:ev，}).那么(功能(任务){$scope.tasks.push(task);});隐藏对话框时.
$mdDialog.hide(task);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!
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);
这篇关于AngularJS (Material) - 使用 md-dialog 添加新对象后刷新 md-list 中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
