Angularjs Array Binding and Filter Concept

AngularJS Array Binding and Filter concept

Part 2:

How to set array binding and filter in angularjs step by step examples in this tutorial.

What is array?

An array stores multiple values in single variable. An array is a special variable, which can hold more than one value at a time.

ex:

In php,

$lang = array("PHP","MYSQL");

access array values use index values,

echo "Front end". $lang[0] . "Back end" . $lang[1].

It is simple array concept in php. How to this type of array concept use in angularjs, it's very simple and easy.

Step 1:

Already, create file structure and include angularjs file.

refer link part 1 tutorial: Create file structure and include angularjs file - part 1.

Follow step by step,

Step 2:

Array initialize use ng-init model name. Array binding in two ways 1.internal array binding, 2.external array binding.

First, explain internal array binding concept. Next tutorials explain external array binding in angularjs.

ex:

ng-init = "employees= [

                             { name:'Ramesh', phone:'9898987678',
                               name:'Vijay', phone:'8976986789',
                               name:'Kumar', phone:'9878987698'
                             }

                             ]"; 

Step 3:

Create text box use input type tag, ng-model name searchText. It's use for enter name or phone search from array and display.

Step 4:

After, create table use html tags. One of the magic code ng-repeat. It's use for extracting single item from array. Its similar
to foreach loop. Filter is reserved word(key word). Filter is filtering the array items. Text box ng-model name assign to filter.

ex:

ng-repeat = "employee in employees | filter:searchText" 

Step 5:

Enter employee name in text box,filter particular employee name and phone number extracting from array.

Result:

enter upper case or lower case letter to search items from array.

refer link: Practical Session! Click Here!


Next tutorial:

How to set limit text in textbox use angularjs?

How to check email format use angularjs?


Touch with me! Gain more!