<!DOCTYPE html>
<html>
<head></head>
<body ng-app="motoAdsApp" ng-controller="AdvertsController">
<b>Filter by click</b>
<div ng-repeat="brand in brands">
<span>{{brand.name}}</span>
<span ng-repeat="model in brand.models">
<a href="" ng-click="addFltr(brand, model)">{{model.name}}</a>
</span>
</div>
<br/>
<b>Adverts found ({{adverts.length}})</b>
<table border="1" width="100%">
<tr>
<th>Brand</th>
<th>Model</th>
<th>Year</th>
</tr>
<tr ng-repeat="advert in adverts">
<td>{{advert.brand}}</td>
<td>{{advert.model}}</td>
<td>{{advert.year}}</td>
</tr>
</table>
<script data-require="angular.js@1.0.8" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
'use strict';
var motoAdsApp = angular.module('motoAdsApp', []);
motoAdsApp.controller('AdvertsController', ['$scope',
function($scope) {
$scope.brands = [{
"name": "Audi",
"models": [{
"name": "A1"
}, {
"name": "A2"
}]
}, {
"name": "Citroen",
"models": [{
"name": "C1"
}, {
"name": "C2"
}]
}];
var allAdverts = [{
"brand": "Audi",
"model": "A1",
"year": 2011
}, {
"brand": "Audi",
"model": "A1",
"year": 2010
}, {
"brand": "Audi",
"model": "A2",
"year": 2012
}, {
"brand": "Citroen",
"model": "C1",
"year": 2011,
}, {
"brand": "Citroen",
"model": "C2",
"year": 2011,
}];
$scope.fltr = {
brand: null,
model: null
};
$scope.addFltr = function(brand, model) {
$scope.fltr.brand = brand.name;
$scope.fltr.model = model.name;
console.log('addFltr ' + $scope.fltr.brand + ' ' + $scope.fltr.model);
};
$scope.$watch('fltr', fltrAdverts, true);
function fltrAdverts() {
$scope.adverts = [];
angular.forEach(allAdverts, function(row) {
if (($scope.fltr.brand && $scope.fltr.brand !== row.brand) || ($scope.fltr.model && $scope.fltr.model !== row.model)) {
return;
}
$scope.adverts.push(row);
console.log('row ' + row.brand + ' ' + row.model + ' fltr ' + $scope.fltr.brand + ' ' + $scope.fltr.model);
});
};
}
]);