I have Created one modal in the modal having on textbox , i want to fill the the textbox as firstname than i will press the button ok , in the same page that value should display , i written the code but i dnt know where the problem after enter the value that value is not showing , can any one help me
Here the code..
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
- <script type="text/javascript">
- var app = angular.module('myApp', []);
- app.controller('myCtrl', function ($scope) {
- $scope.firstName = "";
- $scope.valSubmit = function () {
- firstName = $scope.firstname;
- alert(firstName);
- $("#myModal").modal('hide');
- };
- });
- </script>
- </head>
- <body ng-app="myApp" ng-controller="myCtrl">
- <form id="form1" runat="server">
- <div class="row">
- <div id="myModal" class="modal fade" 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">Modal Header</h4>
- </div>
- <div class="modal-body">
- <input type="text" placeholder="enter first name" id="name" ng-model="firstname" class="form-control" />
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-success" ng-click="valSubmit();">Ok</button>
- <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12" style="border: 1px solid #3399ff">
- <div class="row">
- <div class="col-md-4 bg-info">
- Hello,
- <h1>{{firstName}}</h1>
- </div>
- </div>
- </div>
- </div>
- </form>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script type="text/jscript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
till alert the value is coming correctly...
but inside the <h1> tage the value is not coming....