CODEWITHSUNDEEP
angularjsscopeng-controller
Birger Püschl
Birger Püschl

Reputation: 604

Get undefined when reading $scope variable

I'm trying to read the variable accessCode in my form in a Angular (1.6.8) function but I only get undefined.

The HTML

<form ng-submit="redeem()" ng-controller="SubscriptionCtrl as subscription">
   <input class="text-uppercase" type="number" ng-maxlength="6" placeholder="Indtast kode" ng-model="accessCode" />
   <input type="submit" class="btn btn-dark-green" value="Indløs" />
</form>

The Angular JS

app.controller('SubscriptionCtrl', ['$scope', '$http', '$templateCache',
    function ($scope, $http, $templateCache) {

$scope.redeem = function () {
    console.log($scope.accessCode);
};
}]);

Any ideas why I can't read $scope.accessCode?

Upvotes: 1

Views: 472

Answers (3)

I. Ahmed
I. Ahmed

Reputation: 2534

I think you forget to add the controller as section with ng-model, because you used:

ng-controller="SubscriptionCtrl as subscription"

So, in your ng-model, you have to use:

ng-model="subscription.accessCode"

Also change ng-submit="redeem()" to ng-submit="subscription.redeem()"

So, the HTML section will be as follows:

    <form ng-submit="subscription.redeem()" ng-controller="SubscriptionCtrl as subscription">
       <input class="text-uppercase" type="number" ng-maxlength="6" placeholder="Indtast kode" ng-model="subscription.accessCode" />
       <input type="submit" class="btn btn-dark-green" value="Indløs" />
    </form>

In controller side implement as follows:

//creating a module
var app = angular.module("app",[]);

//registering the above controller to the module
app.controller("SubscriptionCtrl",['$scope',function ($scope){
  $scope.accessCode = "";
    $scope.redeem = function () {
    console.log($scope.accessCode);
  };
}]);

Upvotes: 0

Vivz
Vivz

Reputation: 6620

You don't have to revert your code back to using $scope since using controller as syntax is better (See advantages). You have to bind not only your ng-model but also your ng-submit to your controller instance subscription.

var app = angular.module('myApp', [])
app.controller('SubscriptionCtrl',
    function() {
        var subscription = this;
        subscription.redeem = function() {
            console.log(subscription.accessCode)
        }
    })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="SubscriptionCtrl as subscription">
        <form ng-submit="subscription.redeem()">
            <input class="text-uppercase" type="number" ng-maxlength="6" placeholder="Indtast kode" ng-model="subscription.accessCode" />
            <input type="submit" class="btn btn-dark-green" value="Indløs" />
        </form>
    </div>
</div>

Upvotes: 2

Kishor Velayutham
Kishor Velayutham

Reputation: 818

Try this ..

Might have missed module name in html.

In app.js : 

    var app = angular.module('myApp', []);
    app.controller('SubscriptionCtrl', function($scope) {
       console.log($scope.accessCode);
              .....
    });

Instead of using as .

Directly inject the $scope into the controller.

In HTML:

<body ng-app="myApp">
    <form ng-submit="redeem(collection.Id)" ng-controller="SubscriptionCtrl">
       <input class="text-uppercase" type="number" ng-maxlength="6" placeholder="Indtast kode" ng-model="accessCode" />
       <input type="submit" class="btn btn-dark-green" value="Indløs" />
    </form>
</body>

Follow ng-controller

Hope it helps..!

Upvotes: 0

Related Questions