AngularJS textbox returns 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.

<!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="new1" /><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>

This is my javascript

var app = angular.module('app', ['ui.bootstrap']);
//var ModalDemoCtrl = function ($scope, $modal, $log) {
app.controller('ModalDemoCtrl',['$scope', '$modal','$log','$rootScope',
function controller($scope, $modal, $log, $rootScope)
{
    $scope.open = function (size) {
        $scope.val = "";
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent',
            controller: ModalInstanceCtrl,
            size: size,
            backdrop: 'static',
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
}]);


var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) {

$scope.check = function()
{
    console.log($scope.new1);
};

$scope.ok = function () {
    $modalInstance.close();
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
};

I have plunker link...plnkr.co/edit/szVK5OaFhdyDQX0ozuq8?p=preview — Bharath Kumar
– Bharath Kumar, Commented Sep 24, 2014 at 6:38

V31 · Accepted Answer · 2014-09-24 06:54:04Z

2

In order to access the $scope variable you need to use $parent as it is creating a child scope in the modal

HTML Code (This is changed):

<input type="text" ng-model="$parent.new" /><button ng-click="check()" >check</button>

Working Fiddle

answered Sep 24, 2014 at 6:54

V31

7,6643 gold badges28 silver badges44 bronze badges

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

Comments

Marian Ban · Accepted Answer · 2014-09-24 06:48:19Z

1

declare new property on object initialize instead of scope:

var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) {

        $scope.model= {};

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

        $scope.ok = function () {
            $modalInstance.close();
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    };

http://plnkr.co/edit/A6I158T9I5kGyChgIDK2?p=preview

answered Sep 24, 2014 at 6:48

Marian Ban

8,1881 gold badge35 silver badges45 bronze badges

Comments

Pavi · Accepted Answer · 2014-09-24 07:10:58Z

0

You can pass the ng-model as parameter in "Check" function

<input type="text" ng-model="new1" /><button ng-click="check(new1)" >check</button>

 $scope.check = function(new1)
{
  console.log("value..."+new1);
};

answered Sep 24, 2014 at 7:10

Pavi

7674 silver badges7 bronze badges

Collectives™ on Stack Overflow

AngularJS textbox returns undefined value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related