Open form in Bootstrap Modal Popup on Button Click in AngularJS

mahesh213
 
on Jan 17, 2020 12:20 AM
Sample_904110.zip
3105 Views

Hi,

I have one form with relevant fields a

currently my requirement is that how to include that in popup

after clicking of add button i need to display that fields in modal popup

could you please help me

<html ng-app="myApp">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
            $scope.mahesh = false;
           
           
            $scope.AddStateDiv = function () {
                $scope.mahesh = $scope.mahesh ? false : true;
                GetDepartments();
                ClearFields();
                $scope.Action = "Add";
                $scope.STI_Active = true;
            }
             } ]);
    </script>
</head>
<body ng-controller="myCntrl">
    <div class="container">
        <div>
            <br />
            <br />
            <br />
            <div id="wrapper" class="clearfix" ng-show="mahesh">
                <div class="well">
                    <form name="userForm" novalidate>
                    <h4 class="modal-title" style="text-align: center;">
                        {{Action}} State Details</h4>
                    <div class="form-horizontal">
                        <div class="row">
                            <div class="col-md-4" >
                                <label for="COI_Name">
                                    Country</label>
                                <select class="form-control" name="COI_Name" id="COI_Name" ng-model="COI_Name" containercssclass="all"
                                    ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled"
                                    required>
                                    <option value="">Select Country</option>
                                </select>
                                
                            </div>
                            <div class="col-md-4">
                                <label for="STI_Name">
                                    State</label>
                                <input type="text" class="form-control" name="STI_Name" ng-model="STI_Name" ng-minlength="3"
                                     placeholder="Enter  State Name" required />
                                
                            </div>
                            <div class="col-md-4">
                                <label for="STI_Code">
                                    Code</label>
                                <input type="text" ng-model="STI_Code" name="STI_Code" class="form-control" required />
                               
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4" syle="margin-top:5px;">
                                <label for="STI_Description">
                                    Description</label>
                                <input type="text" class="form-control" ng-model="STI_Description" placeholder="Enter Description Name"
                                    name="STI_Description" required />
                                
                            </div>
                            <div class="col-md-4" ng-class="{ 'has-error' : userForm.STI_GstStateCode.$invalid && !userForm.STI_GstStateCode.$pristine }">
                                <label for="STI_GstStateCode">
                                    GST Code</label>
                                <input type="text" class="form-control" ng-model="STI_GstStateCode" name="STI_GstStateCode"
                                    placeholder="Enter GST Code" required />
                               
                            </div>
                            <div class="col-md-2">
                                <label for="validationCustom01">
                                    Active
                                </label>
                                <br />
                                <input type="checkbox" ng-model="STI_Active" class="sm-form-control" />
                            </div>
                        </div>
                      
                        </div>
                    </div>
                    </form>
                </div>
            </div>
            <button class="btn btn-success btn-sm " ng-click="AddStateDiv();" style="margin-left: 15px;">Add</button>
        </div>
    </div>
</body>
</html>

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jan 17, 2020 02:21 AM
on Jan 17, 2020 02:22 AM

Hi mahesh213,

Refer below code.

HTML

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
            $scope.Action = "Add";
        } ]);
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container">
        <div>
            <div class="modal fade" id="popup" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">×</button>
                            <h4 class="modal-title" style="text-align: center;">{{Action}} State Details</h4>
                        </div>
                        <div class="modal-body">
                            <div id="wrapper" class="clearfix">
                                <div class="well">
                                    <form name="userForm" novalidate>
                                    <div class="form-horizontal">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <label for="COI_Name">Country</label>
                                                <select class="form-control" name="COI_Name" id="COI_Name" ng-model="COI_Name" containercssclass="all"
                                                    ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled"
                                                    required>
                                                    <option value="">Select Country</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="STI_Name">State</label>
                                                <input type="text" class="form-control" name="STI_Name" ng-model="STI_Name" ng-minlength="3"
                                                    placeholder="Enter  State Name" required />
                                            </div>
                                            <div class="col-md-4">
                                                <label for="STI_Code">Code</label>
                                                <input type="text" ng-model="STI_Code" name="STI_Code" class="form-control" required />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4" syle="margin-top:5px;">
                                                <label for="STI_Description">Description</label>
                                                <input type="text" class="form-control" ng-model="STI_Description" placeholder="Enter Description Name"
                                                    name="STI_Description" required />
                                            </div>
                                            <div class="col-md-4" ng-class="{ 'has-error' : userForm.STI_GstStateCode.$invalid && !userForm.STI_GstStateCode.$pristine }">
                                                <label for="STI_GstStateCode">GST Code</label>
                                                <input type="text" class="form-control" ng-model="STI_GstStateCode" name="STI_GstStateCode"
                                                    placeholder="Enter GST Code" required />
                                            </div>
                                            <div class="col-md-2">
                                                <label for="validationCustom01">Active</label>
                                                <br />
                                                <input type="checkbox" ng-model="STI_Active" class="sm-form-control" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#popup" style="margin-left: 15px;">Add</button>
    </div>
</body>
</html>

Demo