Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="myApp">
<div ng-controller="filterCtrl" ng-init="maxAge=30">People younger than
<input ng-model="maxAge" />years:</div>
<hr/>
<div ng-controller="infoCtrl">
<div ng-repeat="person in people" ng-show="person.visible">{{person.name}}, age {{person.age}}, visible ({{person.visible}})</div>
</div>
</div>
CSS
input {
width: 30px;
}
JavaScript
var people = [];
var myApp = angular.module('myApp', []);
myApp.controller("infoCtrl", function ($scope, person) {
$scope.people = person.get();
});
myApp.controller("filterCtrl", function ($scope, person) {
$scope.$watch("maxAge", function (newValue) {
if (newValue) {
person.filterPeople(newValue);
}
});
});
myApp.service("person", function () {
return {
get: function () {
people = AjaxGetPeople();
angular.forEach(people, function (p) {
p.visible = true;
});
return people;
},
filterPeople: function (maxAge) {
angular.forEach(people, function (person) {
if (person.age > maxAge)
person.visible = false;
});
}
};
});
function AjaxGetPeople() {
return [{
name: 'Marcel 1',
age: 26
}, {
name: 'Anhel 2',
age: 42
}];
}