This is the Lesson #8 in the "AngularJS: From 0 To 100" learning tutorials written for absolute Beginners. This article is a continuation of the previous Controllers' Lesson #7 , so please take a look at it.
<<<< PREVIOUS LESSON NEXT LESSON >>>>
For this article we're using the "Brackets" free Web Editor , with support for developing AngularJS Apps . You can see the 5 minutes tutorial about it in this post.
In this post we'll write an AngularJS App , containing a Controller with the necessary behavior (functionality) to populate an HTML5 list from data in JSON format , and a text box to perform searches on that list at the View.
For now, this JSON collection will be hard-coded inside the Controller, but in further tutorials, it will be fetched from an OData RESTful Web Service using Ajax requests.
The AngularJS App will look this way :
Filtering Data in an AngularJS Collection
The first thing for us to do is to load the AngularJS framework and to declare our App :
<!doctype html><html data-ng-app="MusicApp"><head><title> Filtering Data Collections</title> <link href="Controllers.css" rel="stylesheet" type="text/css" /><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script><script src="Controllers.js" type="text/javascript"></script>
</head>
Then we code the data list as we did in our previous lesson , where we exhaustively explained it:
<body> <div class="centered"> <h1>Fragile State Discography</h1> <h2>Neil Cowley (Zero 7) and Ben Mynott</h2> </div> <div id="controls1" data-ng-controller="MusicCtl"> <ul > <li data-ng-repeat="album in albums "> .{{$index + 1}} <img src="{{album.img}}" alt="{{album.name}}" > <span >{{album.name}} - {{album.price | currency:"USD$" | uppercase}}</span> </li> </ul> </div>
Next, we build the Controller, containing the data and the method that loads it inside the list:
var oMusicApp = angular.module('MusicApp', []);
oMusicApp.controller('MusicCtl', [ '$scope', function ($scope) { var albums = [ {img:"Nocturnal.jpg",name:"Nocturnal Beats",price:"12.50"}, {img:"Facts.jpg",name:"The Facts And The Dreams",price:"11.20"}, {img:"Voices.jpg",name:"Voices From The Dust Bowl",price:"13.70"}, {img:"Pretz.jpg",name:"Soundcastles",price:"14.80"} ] $scope.fnShowAlbums = function(){ $scope.albums = albums; } }]);
Then, add the data-ng-click directive to call the Controller's method from the View:
Run the App on the browser:
And click the button to load the list:
Finally, we need to add the filter to get only the data that fits to the user search, inside the data-ng-repeat directive. If you like, take a look at the official AngularJS documentation on $filter .
Therefore, append an input box to input the keyword for search, give it a data-ng-model , and add the expression "filter:" with the model to the repeat directive:
Run the App:
And perform a search:
As you can see, AngularJS takes care automatically of your search, since the AngularJS engine knows where to go to reach the data for the list.
This is one of the fantastic features of AngularJS!!!
div[id^=controls]{padding:5px 5px 5px 25px;margin:10px 15px 15px 25px;font:900 12px Comic Sans MS;opacity:0.9;background:#fed; border:10px solid #ddd; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}button {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:220px;text-align: center;background:#ddd; font:900 14px Comic Sans MS;opacity:0.9;border:1px solid #c0c0c0; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}ul{list-style:none; }input.search {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:190px;text-align: center;background:#fea; font:900 12px Comic Sans MS;opacity:0.9;border:10px solid #ddd; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}div.centered{ text-align:center }
That's All!!! You have begun filtering Data Collections in AngularJS . In the next article we will continue to learn Step by Step how to create an HTML5 Form with Validation support and Error Messages using AngularJS.
Happy programming.....
by Carmel Schvartzman
<<<< PREVIOUS LESSON NEXT LESSON >>>>
כתב: כרמל שוורצמן
No comments:
Post a Comment