CODEWITHSUNDEEP
angularjs
Unknown developer
Unknown developer

Reputation: 5940

AngularJS attributes values

I 've just started to study Angular. Consider the following simple template: 

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" data-ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" data-ng-model="cost">
  </div>
  <div>
    <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>

The attributes values e.g. qty and cost must be stored inside some variables, isn't it? Which ones and how may I access them through the console?

Upvotes: 0

Views: 51

Answers (3)

Uliana Pavelko
Uliana Pavelko

Reputation: 2952

All variables declared in AngularJS app are stored in $scope, you are able to access them trough console.log($scope.qty) from your controller.

However as you are declaring it in your template you by the time HTML has rendered JS is already loaded, therefore console returns "undefined". To understand the concept try:

$timeout(function() {
 console.log($scope.qty) 
}, 400);

Upvotes: 0

Dwijen
Dwijen

Reputation: 590

You will have to create a controller and store these values there.

In your JS file

var app = angular.module('MyApp');
app.controller('MyController', ['$scope', function($scope){
    $scope.qty = 1;
    $scope.cost = 2;
}]);

In your HTML

<div ng-app="MyApp" ng-controller="MyController">
   <b>Invoice:</b>
   <div>
       Quantity: <input type="number" min="0" data-ng-model="qty">
   </div>
   <div>
       Costs: <input type="number" min="0" data-ng-model="cost">
   </div>
   <div>
       <b>Total:</b> {{qty * cost | currency}}
   </div>
</div>

For your second query - detailed post on checking scope variables in Console.

Upvotes: 1

Naga Sandeep
Naga Sandeep

Reputation: 1431

In your js file, you can access them with

$scope.qty and $scope.cost

For eg:

Mark your ng-app as myApp and add a ng-controller

<div ng-app='myApp' ng-controller = 'myController' ng-init="qty=1;cost=2">

Create a js file named app.js with below content

var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope)
{
    console.log($scope.qty);
    console.log($scope.cost);
});

You can see qty and cost logged in console

Upvotes: 2

Related Questions