AngularJS Data Types

In the last article we covered AngularJS expressions. We saw how AngularJS evaluates an expression and returns results. In this article we shall study AngularJS data types that are used to store different types of data.

There are four major AngularJS data types.

  • Numbers
  • Strings
  • Arrays
  • Objects

In the following sections, we shall see how to declare each of the above data types and how to store values in these data types.

AngularJS Number Variables

Angular JS numbers variables are created by simply storing a number in AngularJS variable. Take a look at the following example to see how AngularJS creates number variables.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="num1=10;num2=3">

    
Number1 multiplied by Number2: {{ num1 * num2 }}
<p ng-bind="num1 * num2"></p>


</div>

</body>
</html>

Download the code Try the code

In the above code, if you look at the “ng-init” directive, you should see that it contains two number type variables num1 and num2. Next, expression as well as “ng-bind” directive is displaying the product of these two variables.

AngularJS String Variables

To declare a string variable in AngularJS, simply assign some value withing quotes to a variable. Take a look at the followin example to see how string variables are declared in AngularJS.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="fname='Eric';lname='Cantona'">

    
{{fname +" "+lname}}
<p ng-bind="fname +' '+lname"></p>


</div>

</body>
</html>

Download the code Try the code

In the above code, the “ng-init” directive initializes two string variables “fname” and “lname”. It is important to note here that to semi-colon separates one variable from the other inside “ng-init”.

AngularJS Arrays

AngularJS arrays store collection of data. It is very easy to declare arrays in AngularJS, have a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="colors=['red','green','blue','yellow']">

<p>The second color in the list is {{ colors[1] }}</p>
<p>The second color in the list is <span ng-bind="colors[1]"></span></p>

</div>

</body>
</html>

Download the code Try the code

In the above code, the “ng-init” directive initializes a string array named colors. The array contains names of four colors. Next, the expression and ng-bind directive, both are used to display the second item in the array. However, it is important to note that AngularJS arrays store first item at 0th index.

AngularJS Objects

AngularJS objects are similar to objects in JavaScript. Take a look at the following example to see how to initialize and access objects in AngularJS.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="result={mathematics:'passed',english:'fail'}">

<p>Result for mathematic is : {{ result.mathematics }}</p>

</div>

</body>
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .