如何在angularjs上编写一个弹出窗口来编辑按钮？

我必须编写一个带有输入文本字段的弹出框，以便编辑用户名。当我单击编辑按钮时，应该出现一个带有输入文本字段的弹出框以输入数据。用户名必须修改为数据我已经进入了输入字段。我可以通过在angularjs中使用引导弹出窗口来实现这个功能吗？如何在angularjs上编写一个弹出窗口来编辑按钮？

来源

2017-03-24 srujana

请张贴一些代码？ – funcoding

使用角度引导创建弹出窗口非常简单。

阅读文档。 Angular Bootstrap Modal Directive

下面是一个简单的实现。

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>

来源

2017-03-24 11:44:45 Alok

如何在angularjs上编写一个弹出窗口来编辑按钮？

回答

相关问题