<!DOCTYPE html>
<html ng-app="applic">
<head>
<meta charset="utf-8" />
<title>AngularJS Search with ng-repeat + filter</title>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-require="angular.js@1.4.x"></script>
<script src="todo.js"></script>
</head>
<body>
<div class="container" ng-controller="MainController">
<div class="row">
<h1>Filters and ng-repeat with arrays and objects</h1>
</div>
<div class="row">
<h2>Filter of a string in an array with ng-repeat</h2>
<blockquote>
<input type="text" ng-model="myfilter.str" />
<div ng-repeat="user in mydata.arr |filter: myfilter.str">
<mark>{{user}}</mark>
</div>
</blockquote>
</div>
<div class="row">
<h2>Filter of a an array of objects (filter name OR age)</h2>
<blockquote>
<input type="text" ng-model="myfilter.fake" />
<div ng-repeat="user in mydata1.arr |filter: myfilter.fake |orderBy:'age' |limitTo:5">
<mark>{{user}}</mark>
</div>
</blockquote>
</div>
<div class="row">
<h2>Custom filter of the input (elipses if input > 10 ):</h2>
<blockquote>
<input ng-model="mydata.str" />
<mark>{{mydata.str|charlimit}}</mark>
</blockquote>
</div>
<div class="row">
<h2>Custom filter of the array with input and ng-model(age filter):</h2>
<blockquote>
<input value="25" ng-init="age=25" ng-model="age" />
<br />
<mark>{{mydata1.arr | agefilter:age}}</mark>
</blockquote>
</div>
<div class="row">
<h2>Another custom filter of the array with input and ng-repeat(age filter):</h2>
<blockquote>
<input value="25" ng-init="age1=25" ng-model="age1" />
<div ng-repeat="user in mydata1.arr |agefilter:age1">
<mark>{{user}}</mark>
</div>
</blockquote>
</div>
<strong>NB.Dont't use ng-init on the input, only in special cases;use the controller instead</strong>
</div>
</body>
</html>
var app = angular.module('applic', []);
app.controller('MainController', function($scope) {
$scope.mydata = {
arr: ['jane', 'jake', 'alba', 'fernando', 'giulia']
};
$scope.mydata1 = {
arr: [{
name: 'jane',
age: 34
}, {
name: 'jake',
age: 55
}, {
name: 'giulia',
age: 22
}, {
name: 'stephan',
age: 53
}]
};
});
app.filter('charlimit', function() {
return function(input, limit) {
if (!input) {
return '';
}
if (!limit) {
limit = 10;
}
if (input.length >= limit) {
return input.substr(0, limit) + '...';
} else {
return input;
}
};
});
app.filter('agefilter', function() {
return function(mylist, limit) {
arr = [];
for (x = 0; x < mylist.length; x++) {
var a = mylist[x];
if (a.age > limit) {
arr.push(mylist[x]);
}
}
if (arr.length > 0) {
return arr;
}
};
});