The AngularJS allows us to create new filters and use them in our code for filtering data we hold in arrays. The following code sample shows how to create a simple filter. The sample includes three files.
The following is the HTML file that includes a SCRIPT element for using the AngularJS library, a LINK element for using an external CSS file and a SCRIPT element for using the code we wrote in a separated JS file.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<link rel="stylesheet" href="angularsearchstyle.css" type="text/css" />
<script src="angularsearchcode.js" type="text/javascript"></script>
<title>simple search</title>
</head>
<body>
<div ng-app="myangularsearch" ng-controller="AngularSearchController">
<div class="searchbar">
<input type="text" ng-model="searchstr" placeholder="enter text to search" />
</div>
<ul>
<li ng-repeat="ob in elements | searcher:searchstr">
<a href="{{ob.url}}"><img ng-src="{{ob.image}}" /></a>
<p>{{ob.title}}</p>
</li>
</ul>
</div>
</body>
</html>
The following is the CSS file, that takes care after the final look & feel we get when running the code.
body{
font:18px sans-serif;
}
.searchbar{
border-radius: 2px;
width: 370px;
margin: 48px auto 22px;
}
.searchbar input{
background:#f3f3f3 no-repeat 10px;
border: none;
width: 100%;
line-height: 20px;
padding: 11px 0;
border-radius: 1px;
text-align: left;
font-size: 14px;
font-family: inherit;
color: #738289;
font-weight: bold;
outline: none;
text-indent: 10px;
}
ul{
list-style: none;
width: 428px;
margin: 0 auto;
text-align: left;
}
ul li{
padding: 10px;
overflow: hidden;
}
ul li img{
width:60px;
height:70px;
float:left;
}
ul li p{
margin-left: 75px;
font-weight: bold;
padding-top: 12px;
color:#6e7a7f;
}
The following is the JS file that includes the separated code in JavaScript responsible for creating the controller and the filter we use.
var application = angular.module("myangularsearch", []);
application.filter('searcher', function(){
return function(array, str){
if(!str){
return array;
}
var result = [];
str = str.toUpperCase();
angular.forEach(array, function(element){
if(element.title.toUpperCase().indexOf(str) !== -1){
result.push(element);
}
});
return result;
};
});
function AngularSearchController($scope){
$scope.elements = [
{
url: 'http://en.wikipedia.org/wiki/Van_goh',
title: 'Vincent van Gogh',
image: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Van_Gogh_Self-Portrait_with_Straw_Hat_1887-Metropolitan.jpg/220px-Van_Gogh_Self-Portrait_with_Straw_Hat_1887-Metropolitan.jpg'
},
{
url: 'http://en.wikipedia.org/wiki/Picasso',
title: 'Pablo Picasso',
image: 'http://upload.wikimedia.org/wikipedia/en/thumb/4/41/Portrait_of_Pablo_Picasso%2C_1908-1909%2C_anonymous_photographer%2C_Mus%C3%A9e_Picasso%2C_Paris...jpg/220px-Portrait_of_Pablo_Picasso%2C_1908-1909%2C_anonymous_photographer%2C_Mus%C3%A9e_Picasso%2C_Paris...jpg'
},
{
url: 'http://en.wikipedia.org/wiki/Claude_Monet',
title: 'Claude Monet',
image: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Claude_Monet_1899_Nadar_crop.jpg/225px-Claude_Monet_1899_Nadar_crop.jpg'
},
{
url: 'http://en.wikipedia.org/wiki/Edgar_Degas',
title: 'Edgar Degas',
image: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Edgar_Degas_self_portrait_1855.jpeg/285px-Edgar_Degas_self_portrait_1855.jpeg'
},
{
url: 'http://en.wikipedia.org/wiki/Rembrandt',
title: 'Rembrandt van Rijn',
image: 'http://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Rembrandt_van_Rijn_-_Self-Portrait_-_Google_Art_Project.jpg/220px-Rembrandt_van_Rijn_-_Self-Portrait_-_Google_Art_Project.jpg'
},
{
url: 'http://en.wikipedia.org/wiki/Gustav_Klimt',
title: 'Gustav Klimt',
image: 'http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Klimt.jpg/220px-Klimt.jpg'
}
];
}
The following is a short video clip that goes over this code sample, shows its execution and explains it step by step.
You can find more video clips, code samples and training material for learning how to use the AngularJS library in my online free (for personal usage) courses website at http://abelski.lifemichael.com.
