<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div><h2>Filters:</h2>
Name: <input type="text" ng-model="filters.name"/> <br>
Last Name: <input type="text" ng-model="filters.lastName"/>
</div>
<div >
<h2>List of results:</h2>
<div ng-repeat="person in results | filter:filters ">
{{person.name}} {{person.lastName}}
</div>
</div>
<!-- <h3>Debugging...</h3>
<div>
Results: <pre>{{results | json}}</pre>
Filters: <pre>{{filters | json}}</pre>
</div> -->
</body>
</html>
var app = angular.module('myApp', []);
app.controller('myController', function($scope){
$scope.results = [
{
"name": "Santiago",
"lastName": "Doe"
},
{
"name": "Pablo",
"lastName": "Doe"
},
{
"name": "Veronica",
"lastName": "Doesel"
},
{
"name": "Pablo",
"lastName": "Doe"
},
{
"name": "Veronica",
"lastName": "Doesel"
}
]
})
/* Styles go here */