AngularJS（材料） - 在刷新MD-列表数据使用MD-对话框中添加新的对象后， [英] 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.
唯一的问题是，该对话框关闭MD-列表，其中显示的项目的列表后，不刷新，以显示新添加的任务。我曾尝试使用选项NG重复按钉，但没有奏效。
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.
我得到了这个问题的信息：http://stackoverflow.com/questions/27874976/update-a-md-list-dynamically-from-angular
I got the information from this question: http://stackoverflow.com/questions/27874976/update-a-md-list-dynamically-from-angular
在code我使用显示的任务是这个（简体）
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>
和控制器是这样的：
(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);
});
而隐藏对话框。
$mdDialog.hide(task);
这篇关于AngularJS（材料） - 在刷新MD-列表数据使用MD-对话框中添加新的对象后，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
