The Knowledge Foundation : April 2018

023 AngularJS angular.forEach

AngularJS angular.forEach

AngularJS has inbuilt iterator to iterator through object collcetion .This functionality works both on object collection and array.'angular.forEach' directive is used for this purpose.

Below is the example of iterator on Array.

Example

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

$scope.arr = ['Student 1', 'Student 2', 'Student 3', 'Student 4'];

$scope.idx = [];

angular.forEach($scope.arr, function (value, index)

{

$scope.idx.push(value);

});

</script>

</div>

Output :

Student 1Student 2Student 3Student 4

Below is the example of iterator on object collection.

Example

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

var values = [{ name: 'Student 1', gender: 'male' }, { name: 'Student 2', gender: 'male' }, { name: 'Student 3', gender: 'male'}];

$scope.idx = [];

angular.forEach(values, function (value, key)

{

$scope.idx.push(value.name);

});

</script>

</div>

Output :

Student 1Student 2Student 3

022 AngularJS JSON Serializes and Deserializes

AngularJS JSON Serializes and Deserializes

AngularJS support JSON . You can Serializes and Deserializes object from AngularJS inbuilt fucntion.'angular.toJson()' Serializes object from JavaScript object to JSON string.'angular.fromJson()' Deserializes JSON string and returns an JavaScript object.

Example 1 ( JavaScript object to JSON)

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

$scope.model =

{

student:

{

firstname: "Ayan",

lastname: "Banerjee"

address:

{

city: "Kolkata",

state: "South ,24 Pgs(s)"

}

};

$scope.jsonData = angular.toJson($scope.model);

});

</script>

<span>{{jsonData}}</span>

</div>

Output :
{"person":{"firstname":"Ayan","lastname":"Banerjee"},"address":{"city":"Kolkata","state":"South ,24 Pgs(s)"}}

Example 2 ( JavaScript object to JSON)

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

var Obj = {};

Obj.weight = 75;

Obj.height = 180;

Obj.colors = {};

Obj.colors.r = 150;

Obj.colors.g = 278;

Obj.colors.b = 300;

$scope.obj = Obj;

$scope.SerialisedObj = angular.toJson($scope.obj, true);

});

</script>

<span>{{SerialisedObj}}</span>

</div>

Output :

{ "weight": 75, "height": 180, "colors": { "r": 150, "g": 278, "b": 300 } }

Example 1 (JSON to JavaScript object)

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

var json = '{"name":"Ayan","Hobby":{"Reading":["Story","Novel","Short Story"]}}';

$scope.obj = angular.fromJson(json);

});

</script>

</div>

Output :

Name : Ayan
StoryNovelShort Story

021 AngularJS Compare

AngularJS Compare
AngularJS provides a list of derivatives to provide compare with different situation .For example you can compare , a text with number to determine that the text is number or not.A text can be compare with date to determine that the text is number or not.Below is some of the directive for compare.

angular.isArray() : Check object is Array or not , Returns true if the object is an Array.

angular.isDate() : Check object is Date or not , Returns true if the object is an Date.

angular.isDefined() :Check object is defined or not , Returns true if the object is an defined.

angular.isElement() :Check object is element or not , Returns true if the element is an defined.

angular.isFunction() : Check object is function or not , Returns true if the function is an defined.

angular.isNumber() : Check object is number or not , Returns true if the object is an number .

angular.isObject() : Check object or not , Returns true if the object .

angular.isString() : Check object is string or not , Returns true if the string is an number .

angular.isUndefined() : Check object is defined or not , Returns true if the defined .

angular.equals() : Returns true if two object are equal.

Below are some of the compare example from the above list.

angular.isDate

Example

<div>

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

$scope.date = new Date();

$scope.isDate = angular.isDate($scope.date)

});

</script>

<legend><b>1.Example : isDate Directive </b></legend><span>{{isDate}}</span>

</fieldset>

</div>

Output :

true

angular.isArray

Example

<div>

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

$scope.data = ['User 1', 'User 2', 'User 3'];

$scope.isArray = angular.isArray($scope.data)

});

</script>

<legend><b>2.Example : isArray Directive </b></legend><span>{{isArray}}</span>

</fieldset>

</div>

Output :

true

angular.isObject

Example

<div>

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

$scope.data =

{

"name": "Ayan Banerjee",

"Age": "21",

"Address": "Germany"

};

$scope.isObject = angular.isObject($scope.data)

});

</script>

<legend><b>2.Example : isObject Directive </b></legend><span>{{isObject}}</span>

</fieldset>

</div>

Output :

true

angular.isFunction

Example

<div>

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope)

{

var myFunction = function () { };

$scope.isFunction = angular.isFunction(myFunction);

});

</script>

<legend><b>2.Example : isObject Directive </b></legend><span>{{isFunction}}</span>

</fieldset>

</div>

Output :

true

angular.equals

Example

<div>

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller("myController", function ($scope) {

var obj1 =

{

name : "Ayan Banerjee",

Age : "21",

Address: "Germany"

}

var obj2 =

{

name: "Ayan Banerjee",

Age: "21",

Address: "Germany"

}

$scope.isEqual=angular.equals(obj1, obj2)

});

</script>

<legend><b>2.Example : isEqual Directive </b></legend><span>{{isEqual}}</span>

</fieldset>

</div>

Output :

true

The Knowledge Foundation

Monday, 30 April 2018

023 AngularJS angular.forEach

022 AngularJS JSON Serializes and Deserializes

021 AngularJS Compare

বাঙালির বেড়ানো সেরা চারটি ঠিকানা

Labels

Report Abuse