gpt4 book ai didi

javascript - 关闭 Angular 模态后如何重置所有 HTML 输入字段

转载 作者:行者123 更新时间:2023-11-30 15:10:02 25 4
gpt4 key购买 nike

我将在文本字段中输入用户名和密码,但不会保存。如果不保存该数据,我将关闭弹出模式。

当我在模态框外点击时,它会关闭。

如果我再次打开弹出窗口,以前的数据仍然出现。我需要清除这些数据并希望将该字段设为空。

请检查以下链接。 Plunkr

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

$scope.user = {
user: 'name',
password: null,
notes: null
};

$scope.open = function () {

$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes">

</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>

<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>

最佳答案

问题是,您实际上是将模式中的 $scope.user 绑定(bind)到 ModalDemoCtrl 中的 $scope.user。要解决这个问题,您应该在模态 Controller 中使用之前复制您的 user:

$modal.open({
...
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = angular.copy(user);
...
}
});

参见 Angular.copy()文档。

关于javascript - 关闭 Angular 模态后如何重置所有 HTML 输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45239171/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com