AngularJS（材料） - 在刷新MD-列表数据使用MD-对话框中添加新的对象后，对象、材料、数据、列表

2023-09-13 05:20:27 作者：菇凉不坚强何以立足

我是相当新的，整个世界的角度，但昨天我遇到了一个问题，我似乎无法修复。为原型，我创建一个简单的任务的应用程序，使用户可以创建，查看和删除任务。一个新的任务可以通过点击它打开的对话框中的一个按钮来创建。有些信息可以通过单击添加任务的任务被添加到数据库中给出。

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!

AngularJS（材料） - 在刷新MD-列表数据使用MD-对话框中添加新的对象后，对象、材料、数据、列表

推荐答案