我如何在angularjs上编辑弹出窗口来编辑按钮？(How can I write a popup over edit button in angularjs?)
我必须编写一个带有输入文本字段的弹出窗口，以便编辑用户名。当我单击编辑按钮时，应该出现一个带有输入文本字段的弹出框以输入数据。用户名必须修改为数据，无论我拥有什么输入到输入字段中。如何通过在angularjs中使用引导弹出窗口来实现此目的？
I have to write a popup with input text field to be filled inorder to edit the username.When I click the edit button,a popup should be appear with input text field to enter data.The username has to be modified to data whatever I have entered in the input field.How can I implement this by using bootstrap popups in angularjs?
最满意答案
使用角度引导创建弹出窗口非常简单。
阅读文档。 Angular Bootstrap模态指令
下面是一个简单的实现。
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.enteredUser = {};
$scope.enteredUser.name = 'not yet entered';
$scope.enteredUser.address = 'not yet entered';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (user) {
//$ctrl.selected = selectedItem;
$scope.enteredUser = user;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope, $uibModalInstance){
$scope.ok = function(){
$uibModalInstance.close($scope.user);
};
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
}
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-12">
<br>
<button class="btn" ng-click="OpenModal()">Enter User Details</button>
<br><br>
<ul class="list-group">
<li class="list-group-item active">User Details</li>
<li class="list-group-item">Name: {{enteredUser.name}}</li>
<li class="list-group-item">Address: {{enteredUser.address}}</li>
</ul>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" ng-model="user.name" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Address</label>
<input type="text" class="form-control" id="formGroupExampleInput2" ng-model="user.address" placeholder="Another input">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
</body>
</html>
It is quite straightforward to create a popup using angular bootstrap.
Read the documentation. Angular Bootstrap Modal Directive
Below is a simple implementation.
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.enteredUser = {};
$scope.enteredUser.name = 'not yet entered';
$scope.enteredUser.address = 'not yet entered';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (user) {
//$ctrl.selected = selectedItem;
$scope.enteredUser = user;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope, $uibModalInstance){
$scope.ok = function(){
$uibModalInstance.close($scope.user);
};
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
}
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-12">
<br>
<button class="btn" ng-click="OpenModal()">Enter User Details</button>
<br><br>
<ul class="list-group">
<li class="list-group-item active">User Details</li>
<li class="list-group-item">Name: {{enteredUser.name}}</li>
<li class="list-group-item">Address: {{enteredUser.address}}</li>
</ul>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" ng-model="user.name" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Address</label>
<input type="text" class="form-control" id="formGroupExampleInput2" ng-model="user.address" placeholder="Another input">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
</body>
</html>
我如何在angularjs上编辑弹出窗口来编辑按钮？(How can I write a popup over edit button in angularjs?)
我必须编写一个带有输入文本字段的弹出窗口，以便编辑用户名。当我单击编辑按钮时，应该出现一个带有输入文本字段的弹出框以输入数据。用户名必须修改为数据，无论我拥有什么输入到输入字段中。如何通过在angularjs中使用引导弹出窗口来实现此目的？
I have to write a popup with input text field to be filled inorder to edit the username.When I click the edit button,a popup should be appear with input text field to enter data.The username has to be modified to data whatever I have entered in the input field.How can I implement this by using bootstrap popups in angularjs?
最满意答案
使用角度引导创建弹出窗口非常简单。
阅读文档。 Angular Bootstrap模态指令
下面是一个简单的实现。
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.enteredUser = {};
$scope.enteredUser.name = 'not yet entered';
$scope.enteredUser.address = 'not yet entered';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (user) {
//$ctrl.selected = selectedItem;
$scope.enteredUser = user;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope, $uibModalInstance){
$scope.ok = function(){
$uibModalInstance.close($scope.user);
};
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
}
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-12">
<br>
<button class="btn" ng-click="OpenModal()">Enter User Details</button>
<br><br>
<ul class="list-group">
<li class="list-group-item active">User Details</li>
<li class="list-group-item">Name: {{enteredUser.name}}</li>
<li class="list-group-item">Address: {{enteredUser.address}}</li>
</ul>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" ng-model="user.name" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Address</label>
<input type="text" class="form-control" id="formGroupExampleInput2" ng-model="user.address" placeholder="Another input">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
</body>
</html>
It is quite straightforward to create a popup using angular bootstrap.
Read the documentation. Angular Bootstrap Modal Directive
Below is a simple implementation.
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.enteredUser = {};
$scope.enteredUser.name = 'not yet entered';
$scope.enteredUser.address = 'not yet entered';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (user) {
//$ctrl.selected = selectedItem;
$scope.enteredUser = user;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope, $uibModalInstance){
$scope.ok = function(){
$uibModalInstance.close($scope.user);
};
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
}
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-12">
<br>
<button class="btn" ng-click="OpenModal()">Enter User Details</button>
<br><br>
<ul class="list-group">
<li class="list-group-item active">User Details</li>
<li class="list-group-item">Name: {{enteredUser.name}}</li>
<li class="list-group-item">Address: {{enteredUser.address}}</li>
</ul>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" ng-model="user.name" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Address</label>
<input type="text" class="form-control" id="formGroupExampleInput2" ng-model="user.address" placeholder="Another input">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
</body>
</html>
发布评论