首页 > 编程语言> > Javascript-AngularJS(Material)-使用md-dialog添加新对象后刷新md-list中的数据

Javascript-AngularJS(Material)-使用md-dialog添加新对象后刷新md-list中的数据

2019-11-20 02:36:18 作者：互联网

我对整个Angular世界还很陌生,但是昨天我遇到了一个似乎无法解决的问题.
作为原型,我正在创建一个简单的Task应用程序,使用户可以创建,查看和删除任务.
可以通过单击打开对话框的按钮来创建新任务.可以提供一些信息,通过单击“添加任务”,该任务将被添加到数据库中.

唯一的问题是,在对话框关闭显示项目列表的md-list之后,不会刷新以显示新添加的任务.我确实尝试对ng-repeat使用“ tack by”选项,但这没有用.

我从以下问题获得了信息：https://stackoverflow.com/questions/27874976/update-a-md-list-dynamically-from-angular

我用来显示任务的代码是此代码(简体)

<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);

标签：angularjs,angularjs-ng-repeat,angularjs-material,javascript,angular-nglist
来源： https://codeday.me/bug/20191120/2040708.html