July 12, 2018

Angular Modal popup Box

By admin AngularJs, Technology 0 Comments

Angular Modal popup Box

Today, We want to share with you Angular Modal popup Box.
In this post we will show you Angular Modal popup Box, hear for Angular Modal popup Box we will give you demo and example for implement.
In this post, we will learn about Angular Modal popup Box with an example.

AngularJS Modal popup Box

AngularJS allows here data binding.Here, we are going to simple Modal-popup edit learn how to create popup modal using (js)AngularJS and UI Bootstrap Lib’s.It contains the ng-directive of the call bootstrap component by which popup modal.

Example of AngularJS Modal popup Box

<!doctype html>
<html ng-app="modalexamle">
  <head>
	<title>Creating Angularjs Popup Using Bootstrap UI</title>
	<script src="https://infinityknow.com/lib/angular.min.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
    <script src="example.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="ListCtrl">
      <table class="table table-bordered">
        <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in website_list">
          <td>{{item.name}}</td>
          <td>{{item.value}}</td>
          <td><button class="btn btn-small btn-success" ng-click="edit_data(item)">Edit</button></td>
        </tr>
        </tbody>
      </table>
		<p>
	<hr/>
	<h1>Solution of AngularJs All Problems For infinityknow.com</h1>
	<h3>
	<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of infinityknow.com </a>
</p>
    </div>
	
  </body>
</html>

example.js : JavaScriptFile

angular.module('modalexamle', ['ui.bootstrap']);

function ListCtrl($scope, $dialog) {
  
  $scope.website_list = [
    {name: 'infinityknow.com', value: '5(*****)'},
    {name: 'infinityknow.com', value: '10(**********)'},
    {name: 'w3free.blogspot.in', value: '15(star)'}
  ];
  
  var dialogOptions = {
    controller: 'EditCtrl',
    templateUrl: 'itemEdit.html'
  };

  $scope.edit_data = function(item){
    
    var itemToEdit = item;
    
    $dialog.dialog(angular.extend(dialogOptions, {resolve: {item: angular.copy(itemToEdit)}}))
      .open()
      .then(function(result) {
        if(result) {
          angular.copy(result, itemToEdit);                
        }
        itemToEdit = undefined;
    });
  };
}
// the dialog modal popup is is injected in the specified model controller
function EditCtrl($scope, item, dialog){
  
  $scope.item = item;
  
  $scope.save_data = function() {
    dialog.close($scope.item);
  };
  
  $scope.close_data = function(){
    dialog.close(undefined);
  };
}

itemEdit.html : HTML File

<div class="modal-header">
  <h1>Edit <mark>{{item.name}}</h1>
</div>
<div class="modal-body">
  <p><input ng-model="item.value" /></p>
</div>
<div class="modal-footer">
  <button ng-click="save_data()" class="btn btn-primary" >Save</button>
  <button ng-click="close_data()" class="btn" >close</button>
</div>

View Demo

READ : Laravel vuejs form validation - Input Validation with Laravel

Post Views: 631