2014-04-23 24 views
3

我注意到,在離子待辦事項應用示例中,如果我取消模態並將其重新打開,舊模式/舊待辦事項信息仍保留在模態中。清除/重置舊模態數據的最佳位置是什麼,以便在取消或提交模態表單字段後始終有新的空白字段?如何清除離子角TODO示例中的模態

我是否應該清空或清除任務對象somehwere?在關閉時手動重置字段並創建?添加一個處理程序到某種隱藏事件?

這裏的角/離子例如:

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> 

回答

9

我遇到了同樣的問題。我首先試圖通過在關閉模式窗口時清除模型對象來清除我的表單數據,就像你一樣,但只有當我提交表單時才起作用。取消時,它不起作用! (即使你明確地隱藏彈出之前清除對象,它不會工作)

我最終做這個固定:

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

這樣,每次被加載的窗口時間,您清除模型。因此,提交數據時不要這樣做,而是在打開模式窗口時。至少爲我做了這件事。

順便說一句,我還需要爲這個相同的模態窗口的編輯功能,所以我這樣做:

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

接受的答案肯定是正確的,但還有另一種方式來達到同樣的目的。

// Execute action on hide modal 
$scope.$on('modal.hidden', function() { 
    // Execute action 
    $scope.task = {}; 
});