The Knowledge Foundation

Monday, 30 April 2018

020 AngularJS Advanced Filter

AngularJS Advanced Filter

JSON filter
The JSON filter convert a JavaScript object into JSON string. This filter is mostly used for debugging.

JSON Filter takes two arguments ,object and spacing. object is here JavaScript object.spacing denote spaces to use per indentation , by default 2.

Example

<head>

</head>

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

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

{

$scope.JsonData =

{

"name": "Ayan Banerjee",

"Age": "21",

"Address": "Germany"

};

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

});

</script>

<legend><b>1.Example : Fileter Json Data</b></legend><span>{{JsonData|json :3}}</span>

</fieldset>

<legend><b>2.Example : Fileter Json Array</b></legend><span>{{JsonArray|json :3}}</span>

</fieldset>

</div>

Ouput :

limitTo filter
When you are looping throught , ng-repeat , you can limit , number of repeat.limitTo limits an array/string, into a specified number of elements/characters.

Example

<!DOCTYPE >

<head>

</head>

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

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

{

$scope.limitToArry = ["India", "USA", "Brazil", "China", "Russia", "Germanay"];

$scope.today = new Date();

});

</script>

<legend><b>3.Example : Fileter limitTo </b></legend>

</fieldset>

</div>

Output:

date filter

Format date to a specific format.For example

1.M/d/yy h:mm a
2.MMM d, y h:mm:ss a
3.M/d/yy
4.MMM d, y
5.MMMM d, y
6.EEEE, MMMM d, y
7.h:mm a
8.h:mm:ss a

Example

<!DOCTYPE >

<head>

</head>

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

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

{

$scope.today = new Date();

$scope.dateFormat =

[

{ id: 1, name: 'M/d/yy h:mm a' },

{ id: 2, name: 'MMM d, y h:mm:ss a' },

{ id: 3, name: 'M/d/yy' },

{ id: 3, name: 'MMM d, y' },

{ id: 3, name: 'MMMM d, y' },

{ id: 3, name: 'EEEE, MMMM d, y' },

{ id: 3, name: 'h:mm a' },

{ id: 3, name: 'h:mm:ss a' },

];

$scope.Format = function ()

{

$scope.format = $scope.selectedItem.name;

};

});

</script>

<legend><b>4.Example : Fileter Date</b></legend>

<table>

<tr>

<td>

Select Date Format :

</td>

<td>

<select ng-model="selectedItem" ng-options="dateFormat as dateFormat.name for dateFormat in dateFormat"

ng-change="Format()">

</select>

</td>

</tr>

<tr>

Date = {{ today | date : format }}

</td>

</tr>

</table>

</fieldset>

</div>

Ouput :

019 AngularJS Manual Startup

AngularJS Manual Startup

AngularJS Application either can be initialized automatically or can be initialized manually.'ng-app' directive instruct AngularJS to initialized application automatically .AngularJS find element with 'ng-app' , if found ,AngularJS starts automatically.

Example

<!DOCTYPE >

<head>

</head>

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

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

{

$scope.DoPart = function ()

{

$scope.StringPart = $scope.myString.substr(1, 4);

}

});

</script>

Enter Text <input type="text" ng-model="myString" ng-change="DoPart()" /><br />

Your String : {{ StringPart }}

</div>

Output:

AngularJS also allow manually start up of AngularJS application.When you need to perform certain task before the application start up, you will use manual application.For example , you want the fetch data from server before AngularJS initialization.Your page have several other link to load ,may be web page ,script ,css . You want to load full page and link , then manually start AngularJS.

'angular.bootstrap' instruct manually start up AngularJS. angular.bootstrap takes three arguments.

element :DOM element which is the root of AngularJS application.

modules(Optional)

config :Configuration options object.

Example

<!DOCTYPE >

<head>

</head>

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

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

$scope.model = '';

$scope.DoPart = function ()

{

$scope.StringPart = $scope.myString;

};

});

function Initialise()

{

var appDiv = document.getElementById("myApp");

angular.bootstrap(angular.element(appDiv), ['myApp']);

}

</script>

Enter Text <input type="text" ng-model="myString" ng-change="DoPart()" /><br />

Your String : {{ StringPart }}

</div>

In this example the AngularJS application has not initialized automatically.When you press the button "Initialize AngularJS application",the application initialize , binding woks with input and expression.

Live Example

Enter Text
Your String : {{ StringPart }}

If you use more than one 'angular.bootstrap'.The first start up will work , second and on words will not work properly.second and on words directive will report error.You will get status at your browser console.

Below is the example with more than one manual start up.

Example

<!DOCTYPE >

<head>

</head>

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

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

{

$scope.model = '';

$scope.DoPart = function () {

$scope.StringPart = $scope.myString;

};

});

function Initialise1()

{

var appDiv = document.getElementById("myApp");

angular.bootstrap(angular.element(appDiv), ['myApp']);

}

function Initialise2()

{

var appDiv = document.getElementById("myApp");

angular.bootstrap(angular.element(appDiv), ['myApp']);

}

</script>

<br />

Enter Text

Your String : {{ StringPart }}

</div>

Output :

Below is the example when you try to initialize second Initialize.

The Knowledge Foundation

Monday, 30 April 2018

020 AngularJS Advanced Filter

019 AngularJS Manual Startup

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

Labels

Report Abuse