<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Filter Example</title>
<script src="myjsfile/angular.min.js"></script>
<link href="myjsfile/style.css" rel="stylesheet" />
<script type="text/javascript">
var app = angular.module('myApp', []);
app.filter('searchFor', function () {
return function (arr, searchString) {
if (!searchString) {
return arr;
}
var result = [];
searchString =
searchString.toLowerCase();
angular.forEach(arr, function (item) {
if
(item.title.toLowerCase().indexOf(searchString) !== -1) {
result.push(item);
}
});
return result;
};
});
function myController($scope) {
$scope.item = [
{
title: 'BMW',
images: { thumbnail: "Cars/BMW.jpg" }
},
{
title: 'Lambrghini',
images: { thumbnail: "Cars/Lamborghini.jpg" }
},
{
title: 'Bugatti',
images: { thumbnail: "Cars/bugatti.jpg" }
},
{
title: 'Farrari',
images: { thumbnail: "Cars/farrari.jpg" }
},
{
title: 'Porsche',
images: { thumbnail: "Cars/porsche.jpg" }
},
{
title: 'Porsche19',
images: { thumbnail: "Cars/Porsche19.jpg" }
},
];
}
</script>
</head>
<body data-ng-app="myApp" data-ng-controller="myController">
<div class="bar">
<input type="text" data-ng-model="searchString" placeholder="Enter your
search terms" />
</div>
<ul>
<li ng-repeat="i in item |
searchFor:searchString">
<img data-ng-src="{{i.images.thumbnail}}" />
<p>{{i.title}}</p>
</li>
</ul>
</body>
</html>
No comments:
Post a Comment