3

我注意到，在离子待办事项应用程序示例中，如果我取消模式并再次打开它，陈旧/旧的待办事项信息仍保留在模式上。清除/重置旧模式数据的最佳位置是什么，以便在我取消或提交模式表单字段后它总是有新的空白字段？

我应该在某个地方清空还是清除任务对象？在关闭和创建时手动重置字段？将处理程序添加到某种隐藏事件？

这是角度/离子示例：

http://ionicframework.com/docs/guide/building.html

和相关的代码片段

 // Called when the form is submitted
  $scope.createTask = function(task) {
    $scope.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();
    task.title = "";
  };

  // Open our new task modal
  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  // Close the new task modal
  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  };

和模态

<div class="modal">

<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
  <h1 class="title">New Task</h1>
  <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>

<!-- Modal content area -->
<ion-content>

  <form ng-submit="createTask(task)">
    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="What do you need to do?" ng-model="task.title">
      </label>
    </div>
    <div class="padding">
      <button type="submit" class="button button-block button-positive">Create Task</button>
    </div>
  </form>

</ion-content>

4

2 回答 2

9

我有同样的问题。我首先尝试通过在关闭我的模态窗口时清除模型对象来清除我的表单数据，就像你一样，但这似乎只适用于我提交表单时。取消时，它不起作用！（即使您在隐藏弹出窗口之前明确清除对象，它也不起作用）

我最终通过这样做来修复它：

$scope.newTask = function() {
   $scope.task = {};
   $scope.taskModal.show();
};

这样，每次加载窗口时，您都会清除模型。所以诀窍不是在提交数据的时候做，而是在打开模态窗口的时候做。至少对我来说是这样。

顺便说一句，我还需要为同一个模态窗口添加一个编辑功能，所以我这样做：

$scope.editTask = function(task) {
   $scope.task = task;
   $scope.taskModal.show();
};
于 2014-04-25T16:18:36.450 回答
0

公认的答案绝对是正确的，但还有另一种方法可以实现相同的目标。

// Execute action on hide modal
$scope.$on('modal.hidden', function() {
  // Execute action
  $scope.task = {};
});
于 2015-11-24T08:44:50.777 回答