<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter nested properties in angularjs</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ngController', function($scope) {
$scope.countries = [{
"name": "USA",
"category_id": 1,
"locations": [{
"cityId": 22,
"regionId": 1
}]
}, {
"name": "India",
"category_id": 2,
"locations": [{
"cityId": 30,
"regionId": 2
}]
}];
$scope.search = function(shop) {
if ($scope.Selected_CityId === undefined || $scope.Selected_CityId.length === 0) {
return true;
}
var match = false;
angular.forEach(shop.locations, function(location) {
if (location.cityId === parseInt($scope.Selected_CityId)) {
match = true;
}
});
return match;
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ngController">
<h1>filter nested properties</h1>
<input type="text" ng-model="Selected_CityId" />
<div ng-repeat="country in countries | filter : search">
{{country.name}} {{ country.locations }}
</div>
<div>
<br><a href="http://www.code-sample.com/2014/09/angularjs-documentation.html">Click for more detail</a>
</div>
</div>
</body>
</html>
// Code goes here
/* Styles go here */