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

5

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);
};

edited Oct 20, 2015 at 13:31

answered Sep 23, 2014 at 11:43

Nitsan Baleli

5,4683 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS textbox return undefined value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related