Tutorials for web designers and developers
Tutorials for Developers_
Search
Close this search box.

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

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar is an expert Web Developer, SEO specialist, and Graphic Designer. Hafiz Faraz is an expert in WordPress design and development. Hire on Upwork | Hire on Fiverr

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:

<!doctype html>
<html ng-app="GuitarApp">
<head>
	<meta charset="UTF-8">
	<title>Angular Application</title>
	<link rel="stylesheet" type="text/css" href="styles.css"></link>
	<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
	<script src="lib/Angular/angular.min.js" type="text/javascript" ></script>
	<script src="js/controllers.js" type="text/javascript" ></script>
</head>
<body>

<!-- Start of Controller -->	
<div class="main" ng-controller="GuitarFunction">
 <!-- SEARCH AREA -->
<div class="search">
	<h1>Offshore Guitar Store</h1>
	<label>Search Guitar</lavel>
	<input type="text" ng-model="query" >
		<label>Sort by:
			<select ng-model="orderGuitar">
				<option value="name" selected>Name</option>
				<option value="price">Price</option>
			</select>
		</label>
		<br>
		<label>
			<input type="radio" ng-model="direction" name="direction" checked>
			Ascending
		</label>
		<label>	
			<input type="radio" ng-model="direction" name="direction" value="reverse" >
			Descending
		</label>
</div>
<!--END of SEARCH AREA -->

<ul> 
	<li class="itemHolder" ng-repeat="item in guitarVariable  | filter:query | orderBy:orderGuitar:direction ">
	<img ng-src="img/{{item.image}}.jpg">
		<div>
			<h3> {{item.name | uppercase }}</h3>
			<p> {{item.description}}</p>
		</div>
	</li>
</ul>
</div>
<a class="developer" href="http://blog.hfarazm.com/category/angular-js">« Goto developer's blog </a>
</body>
</html>

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:

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:

<select ng-model="orderGuitar">
	<option value="name" selected>Name</option>
	<option value="price">Price</option>
</select>

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:

var nameSpace = angular.module("GuitarApp", []);
nameSpace.controller("GuitarFunction", ['$scope','$http', function($scope, $http)
		{    
			$http.get('js/data.json').success (function(data){
				$scope.guitarVariable = data;
				$scope.orderGuitar = 'name';
			}); 
		}]
);

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:

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 :

<li class="itemHolder" ng-repeat="item in guitarVariable | orderBy:'-price' | filter:query1 | orderBy:orderGuitar:direction">
  ........ other code .......
<p> There are <span ng-bind="guitarVariable.length"></span> items in data.json file</p>
</li>

OR

<li class="itemHolder" ng-repeat="item in guitarVariable | orderBy:'-price' | filter:query1 | orderBy:orderGuitar:direction">  
........ other code .......
<div> There are {{guitarVariable.length}} items in data.json file</div>
</li>

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

ng-bind-template

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

<li class="itemHolder" ng-repeat="item in guitarVariable | orderBy:'-price' | filter:query1 | orderBy:orderGuitar:direction"> 
 ........ other code .......
<div ng-bind-template="First: {{guitarVariable[0].price}}. Second: {{guitarVariable[1].price}}">
</div>
</li>

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 :

<li class="itemHolder" ng-repeat="item in guitarVariable | orderBy:'-price' | filter:query1 | orderBy:orderGuitar:direction"> 
 ........ other code .......
<div ng-non-bindable>
    AngularJS uses {{ and }} characters for templates
</div>
</li>

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

//

29 Responses

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *