-
Notifications
You must be signed in to change notification settings - Fork 55
/
02-2-filters.html
53 lines (46 loc) · 1.5 KB
/
02-2-filters.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
\<head>
<title>ng-filter</title>
<style>
*{font-family: Tahoma; font-size: 1em;}#wrapper{width:100%;};
#inner{width:50%; margin:0 auto; border:solid black 1px;};
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
//we create a factory to supply our data
app.factory('Phonebook', function(){
var Phonebook = {};
Phonebook.people = [
{name:"Andrew", phone:"1234567"},
{name:"Natasha", phone:"784211"},
{name:"Billy", phone:"1235571"},
{name:"Amanda", phone:"4112311"},
{name:"Police", phone:"911"},
{name:"Bilana", phone:"12991"}
];
return Phonebook;
});
function Ctrl($scope, Phonebook){
$scope.phonebook = Phonebook
}
</script>
</head>
<body ng-app="myApp">
<div id="wrapper"><div id="inner" ng-controller="Ctrl">
<!--This is just a general search using the $ sign.-->
General Search:<input type="text" ng-model="searchText.$"><br />
<!--By setting the certain properties of the searchText you can
limit to search only certain properties of the list-->
Name Search <input type="text" ng-model="searchText.name"><br />
Phone number Search <input type="text" ng-model="searchText.phone"><br />
<!--The key thing here is to have 'searchText' as the string filter-->
<table><tr ng-repeat="person in phonebook.people | filter:searchText">
<td>{{$index+1}}</td>
<td>{{person.name}}</td>
<td>{{person.phone}}</td>
</tr></table>
</div></div>
</body>
</html>