Tutorial 8: Binding input field to filters | Data binding angularjs

In AngularJS by Hafiz Faraz10 Comments

Here we shall concentrate on data binding angularjs. In addition to using filters to modify the data from models, you can use them to control how the information is bound to form elements. In the filters tutorial, we ADDED search panel which wasn’t doing anything. Now is the time to make that search panel work. Download PREVIOUS tutorial files, because we shall be making use of that index.html file here in this tutorial. Lets replace index.html code with the following:

Code Explanation:

  • ng-model=”query” is a directive model or in simple words just a model name given to input field
  • ng-model=”orderGuitar” is another directive model. Reason for using two different models is that I want to bind the guitar list with input field using query directive  and drop down list using orderGuitar directive.
  • ng-model=”direction”  is another directive model for changing direction(direction is not a keyword).
  • next in ng-repeat I added a filter(What are filters?) named as filter: query which is the same name as ng-model=”query” and then added another filter orderBy: orderGuitar
  • name and price are data names coming from data.json file, which are names and prices of an item. So we are sorting them according to their names and prices.
  • direction is for ascending and descending representation of data it won’t work until unless you have selected NAME or PRICE from drop-down list.
  • Try running that code in your firefox browser then type in bass or acoustic, you will see result filtering out like this:Binding input field

There is one thing about above pic that bugging me is SORT BY: drop down list is selected to none, although we can set it to some selected value in index.html like following highlighted code but sometimes it wont work:

To solve this problem, we can also set the ‘SORT BY drop-down’ to selected value like NAME using angular JS. For that you need to open controllers.js file and add the following line to it:

Code Explanation:

$scope is holding orderGuitar model that we created in index.html file and setting its value to ‘name’ which is coming from data.json. Now when we reload our application we shall see NAME selected in drop-down and sorted accordingly like this:

Data binding in angularjs

This is called one-way data binding in angularjs, means a value is taken from the data model and inserted into an HTML element . Basically there is another type of data binding, called LIVE data binding in angularjs, which means that when the value associated with the binding is changed in the data model, the HTML element will be updated to display the new value. 

[table]Some useful data binding directives in angularjs are as follows:

ng-bind – Binds the inner Text property of an HTML element. (Above example)
ng-bind-template – Similar to the ng-bind directive but allows for multiple template

ng-non-bindable – Declares a region of content for which data binding will not be performed.

ng-bind-html – Creates data bindings using the inner HTML property of an HTML element.
ng-model – Creates a two-way data binding.
[/table]

ONE WAY Data Binding works like this:

ng-bind

Add following line of code inside the body of <li> like :

OR

code tells the no. of items in data.json.

ng-bind-template

Add following line of code inside the body of <li> like :

code tells the no. 1 and no. 2  items in data.json file

ng-non-bindable

Add following line of code inside the body of <li> like :

code tells that don’t bind {{ … }}. you will see {{ }} as it is when loaded in firefox browser.  Or in other words it prevents inline data binding.

Lets see how TWO WAY Data Binding works:

Two-way data bindings track changes in both directions, allowing elements that gather data from the user to
modify the state of the application. Two-way bindings are created with the ng-model directive. Interestingly, we have already done this example in this tutorial when we binded input field to guitars. Two-way bindings can be applied only to elements that allow the user to provide a data value, which means the input, textarea, and select elements.

Download project files

Hope you like it. Please share my work.

next-AngularJS MVCPrevious-Chapter-Button

//

  • Shahzad Ashraf

    jzaakallah
    God bless u bro..

    • Hafiz Faraz Mukhtar

      Thanks

  • Shahzad Ashraf

    how many tutorail are??becs i want to learn as soon as possible….becs iam doing final year project in angularjs..

    • Hafiz Faraz Mukhtar

      6 to 10 more tutorials yet to come. Good to know that.

  • Shahzad Ashraf

    can u defined the content of tutorials earlier???and when they r completed??so that we can also suggest about topics

    • Hafiz Faraz Mukhtar

      its a good idea .. I was also thinking about it. contents will be updated soon in this week.

  • Shahzad Ashraf

    is next lecture is about routing??…client side routing………….will u also include the crud operation i

    • Hafiz Faraz Mukhtar

      yes it is about routing .. will explain CRUD after 4 5 tutorials

  • Shahzad Ashraf

    when the next lecture is coming??

    • Hafiz Faraz Mukhtar

      Next lecture coming today