AngularJS (Material) - 使用 md-dialog 添加新对象后刷新 md-list 中的数据
AngularJS (Material) - Refreshing data in md-list after adding new object using md-dialog
我对整个 Angular 世界还很陌生,但昨天我 运行 遇到了一个我似乎无法解决的问题。
作为原型,我正在创建一个简单的任务应用程序,使用户能够创建、查看和删除任务。
单击打开对话框的按钮可以创建新任务。可以在中提供一些信息并通过单击 "add task" 将任务添加到数据库中。
唯一的问题是,在对话框关闭后,显示项目列表的 md-list 不会刷新以显示新添加的任务。我确实尝试过为 ng-repeat 使用 "tack by" 选项,但那没有用。
我从这个问题中得到了信息:
我用来显示任务的代码是这个(简体)
<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>
对话框的模板如下所示:
<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));
所以我想知道是否有人可以帮助我解决这个问题。
提前致谢!
您将任务推送到错误范围的任务列表中。
以下应该为您完成工作。
在显示对话框时。
$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);
我对整个 Angular 世界还很陌生,但昨天我 运行 遇到了一个我似乎无法解决的问题。 作为原型,我正在创建一个简单的任务应用程序,使用户能够创建、查看和删除任务。 单击打开对话框的按钮可以创建新任务。可以在中提供一些信息并通过单击 "add task" 将任务添加到数据库中。
唯一的问题是,在对话框关闭后,显示项目列表的 md-list 不会刷新以显示新添加的任务。我确实尝试过为 ng-repeat 使用 "tack by" 选项,但那没有用。
我从这个问题中得到了信息: 我用来显示任务的代码是这个(简体) 对话框的模板如下所示: 控制器看起来像这样: 所以我想知道是否有人可以帮助我解决这个问题。<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>
<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));
提前致谢!
您将任务推送到错误范围的任务列表中。
以下应该为您完成工作。 在显示对话框时。
$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);