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

时间:2015-07-14 08:52:40

标签: javascript angularjs angularjs-ng-repeat angularjs-material angular-nglist

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

唯一的问题是,在对话框关闭后,显示项目列表的md-list不会刷新以显示新添加的任务。我确实尝试使用"大括号" ng-repeat的选项,但不起作用。

我从这个问题得到了信息:http://stackoverflow.com/questions/27874976/update-a-md-list-dynamically-from-angular

我用来显示任务的代码是这一个(简化)

onBeaconsDiscovered(Region region,List<BeaconDevice> beaconDevices) 

对话框的模板如下所示:

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

Controller看起来像这样:

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

所以我想知道是否有人可以帮我解决这个问题 提前谢谢!

1 个答案:

答案 0 :(得分:3)

您正在将任务推入错误范围的任务列表中。

以下应该为你做的工作。 同时显示对话框。

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