AngularJS : Number
AngularJS numbers are like JavaScript numbers , AngularJS Number can be Filter ,simple mathematical calculation is possible on Number . Number can be put under an Object.
Below is the example of simple mathematical calculation.
Example
Below is the example of simple number is formatted to 2 decimal place.
Example
<!DOCTYPE >
Output :
AngularJS
Below is the example of string sub string.OriginalString is value is parted and stored in StringPart .
Example
Below is the example of simple object student , and student element can be accessible by (.).
Example
Below is the example of Complext Object , Object array is nested under object array.This object element is accessible by AngularJS.
Example
AngularJS : Array
AngularJS numbers are like JavaScript array,array elementt can be added , edit , delete. AngularJS also support looping throught array.
AngularJS numbers are like JavaScript numbers , AngularJS Number can be Filter ,simple mathematical calculation is possible on Number . Number can be put under an Object.
Below is the example of simple mathematical calculation.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div
ng-app=""
ng-init="height=15;width=15">
<p>Total
Area : {{ height * width }}</p>
</div>
</body>
Output :
Total Area : 225
Below is the example of simple number is formatted to 2 decimal place.
Example
<!DOCTYPE >
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div
ng-app=""
ng-init="height=15">
<p><div>{{
height | currency: '' }}</div></p>
</div>
</body>
Output
:
15.00
AngularJS : String
AngularJS string are like JavaScript string ,AngularJS string can be Filter ,simple string operation , like concatenation ,sub string is possible.String can be put under an Object.
AngularJS string are like JavaScript string ,AngularJS string can be Filter ,simple string operation , like concatenation ,sub string is possible.String can be put under an Object.
Below is the example of string concatenation.string var1 , var2 is concatenated to an output.
Example
<!DOCTYPE >
Example
<!DOCTYPE >
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div
ng-app=""
ng-init="var1='Angular';var2='JS'">
<p><div>{{
var1+ var2 }}</div></p>
</div>
</body>
Output :
AngularJS
Below is the example of string sub string.OriginalString is value is parted and stored in StringPart .
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myCtroller",
function
($scope)
{
$scope.OriginalString
= "";
$scope.StringPart
= [];
$scope.DoPart
= function
()
{
$scope.StringPart
= $scope.OriginalString.substr(1, 4);
}
});
</script>
<div
ng-app="myApp"
ng-controller="myCtroller"
ng-init="OriginalString='I
am Learing AngularJS'">
<button
type="button"
ng-click="DoPart()">
Click
Me</button>
{{
StringPart }}
</div>
Output
:
Click
Me : am
AngularJS : Object
AngularJS object are like JavaScript object ,AngularJS object support nested object also.Object element and nested element can be accessible through AngularJS . AngularJS object also support loop.
AngularJS object are like JavaScript object ,AngularJS object support nested object also.Object element and nested element can be accessible through AngularJS . AngularJS object also support loop.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<div
ng-app=""
ng-init="student={name:'John',age:20}">
<table>
<tr>
<td>Name
:
</td>
<td>{{student.name}}
</td>
</tr>
<tr>
<td>Age
:
</td>
<td>{{student.age}}
</td>
</tr>
</table>
</div>
Output:
| Name : | John |
| Age : | 20 |
Below is the example of Complext Object , Object array is nested under object array.This object element is accessible by AngularJS.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="myapp">
<script>
angular.module("myapp",
[])
.controller("myController",
function
($scope) {
$scope.person
=
[
{
name: "User 1",
age: 12, mark: [{ lang: 50, math: 80, geo: 60}] },
{
name: "User 2",
age: 18, mark: [{ lang: 60, math: 90, geo: 70}] },
{
name: "User 3",
age: 20, mark: [{ lang: 70, math: 100, geo: 80}] }
]
});
</script>
<div
ng-controller="myController">
<table>
<tr
ng-repeat="obj
in person">
<td>
Name
:
</td>
<td>{{obj.name}}
</td>
<td>
Age
:
</td>
<td>{{obj.age}}
</td>
<td>
<span
ng-repeat="subobj
in obj.mark">Marks :
{{subobj.lang}}|{{subobj.math}}|{{subobj.geo}} </span>
</td>
</tr>
</table>
</div>
</body>
Output:
Name
: User 1 Age : 12 Marks : 50|80|60
Name
: User 2 Age : 18 Marks : 60|90|70
Name
: User 3 Age : 20 Marks : 70|100|80
AngularJS : Array
AngularJS numbers are like JavaScript array,array elementt can be added , edit , delete. AngularJS also support looping throught array.
Below is the example of array , myArray , is declared and access the array element .
Example
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<div
ng-app=""
ng-init="myArray=[1,2,3,4,5]">
<p>
Array
Result is <span
ng-bind="myArray[2]"></span>
</p>
</div>
Output:
Array
Result is 3
Below is the example of array , add , detele of item.
Example
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="myapp">
<script>
angular.module("myapp",
[])
.controller("myController",
function
($scope) {
$scope.items
= ['User 1',
'User 2',
'User 3'];
$scope.add
= function
() {
$scope.items.push($scope.AddArr);
};
$scope.remove
= function
(DelIndex) {
$scope.items.splice(DelIndex,
1);
};
});
</script>
<div
ng-controller="myController">
<table>
<tr
ng-repeat="x
in items">
<td>
{{x}}
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>Add
Item to Array :</legend>
<input
type="text"
ng-model="AddArr">
<button
type="button"
ng-click="add()"
value="ADD"
/>
<fieldset
/>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>Delete
Item from Array :</legend>
<input
type="text"
ng-model="DelIndex">
<button
type="button"
ng-click="remove()"
value="Remove"
/>
<fieldset
/>
</td>
</tr>
</table>
</div>
</body>
No comments:
Post a Comment