AngularJS textbox return undefined value

Question

When I press my button check in bootstrap modal, I want to print the value of my textbox in my console. But my textbox returns a undefined. It seems that all of the code are working perfect.

this is link Plunker

<!doctype html> <html ng-app="app" ng-controller="ModalDemoCtrl"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> <script src="example1.js"></script> </head> <body> <div ><button class="btn btn-default" ng-click="open('lg')" >Large modal</button> <script type="text/ng-template" id="myModalContent"> <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <input type="text" ng-model="new" /><button ng-click="check()" >check</button> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> </div> </script> </div> </body> </html>

Nitsan Baleli · Accepted Answer · 2015-10-20 13:31:42Z

Since your modal is set to have its own controller, and therefore its own scope,

when you execute the function 'check' it tries to alert $scope.new,

$scope.new isn't set on the modal scope.

one way to overcome this is to pass the new variable into the function, and let the function alert the passed value.

here's a fixed plunkr

when calling check(), pass in the new variable:

<button ng-click="check(new)">check</button>

and in your controller change check function:

$scope.check = function(text) { alert(text); };

Collectives™ on Stack Overflow

AngularJS textbox return undefined value

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related