Post
Ask Question
Anilananda Chakrabortty

Anilananda Chakrabortty

  • NA
  • 425
  • 78k

variable value is not updating

Jul 12 2018 11:05 PM
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..
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>  
  2. <script type="text/javascript">  
  3. var app = angular.module('myApp', []);  
  4. app.controller('myCtrl', function ($scope) {  
  5. $scope.firstName = "";  
  6. $scope.valSubmit = function () {  
  7. firstName = $scope.firstname;  
  8. alert(firstName);  
  9. $("#myModal").modal('hide');  
  10. };  
  11. });  
  12. </script>  
  13. </head>  
  14. <body ng-app="myApp" ng-controller="myCtrl">  
  15. <form id="form1" runat="server">  
  16. <div class="row">  
  17. <div id="myModal" class="modal fade" role="dialog">  
  18. <div class="modal-dialog">  
  19. <div class="modal-content">  
  20. <div class="modal-header">  
  21. <button type="button" class="close" data-dismiss="modal">×</button>  
  22. <h4 class="modal-title">Modal Header</h4>  
  23. </div>  
  24. <div class="modal-body">  
  25. <input type="text" placeholder="enter first name" id="name" ng-model="firstname" class="form-control" />  
  26. </div>  
  27. <div class="modal-footer">  
  28. <button type="button" class="btn btn-success" ng-click="valSubmit();">Ok</button>  
  29. <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
  30. </div>  
  31. </div>  
  32. </div>  
  33. </div>  
  34. </div>  
  35. <div class="row">  
  36. <div class="col-md-12" style="border: 1px solid #3399ff">  
  37. <div class="row">  
  38. <div class="col-md-4 bg-info">  
  39. Hello,  
  40. <h1>{{firstName}}</h1>  
  41. </div>  
  42. </div>  
  43. </div>  
  44. </div>  
  45. </form>  
  46. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  47. <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....

Answers (1)