Menu
I want to list cities based on their emirates using angularJS. That means when a emirate is selected from one drop down then the city drop down is filtered with the ng-model value of emirate. But the problem is filtering works but some cities' unique id are matched with a region id. For example if I select "Ras al-Khaimah" from the emirate drop down then its city "Ras al-Khaimah" appears in city drop down but "Fujairah" also appears there because the unique id of "Fujairah" is same as the unique id of "Ras al-Khaimah". So how can I filter specific fields of city JSON array in ng-repeat with the ng-model value of emirate? Please check my JSON array and my code is:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.emriates = [
{ "region_id": "1", "region_name": "Abu Dhabi" },
{ "region_id": "2", "region_name": "Ajman" },
{ "region_id": "3", "region_name": "Dubai" },
{ "region_id": "4", "region_name": "Fujairah" },
{ "region_id": "5", "region_name": "Ras al-Khaimah" },
{ "region_id": "6", "region_name": "Sharja" },
{ "region_id": "7", "region_name": "Umm al-Quwain" }
];
$scope.cities = [
{ "city_id": "2", "region_id": "1", "city_name": "Abudhabi" },
{ "city_id": "3", "region_id": "3", "city_name": "Dubai" },
{ "city_id": "4", "region_id": "2", "city_name": "Ajman" },
{ "city_id": "5", "region_id": "4", "city_name": "Fujairah" },
{ "city_id": "6", "region_id": "5", "city_name": "Ras al-Khaimah" },
{ "city_id": "7", "region_id": "6", "city_name": "Sharja" },
{ "city_id": "8", "region_id": "7", "city_name": "Umm al-Quwain" },
{ "city_id": "9", "region_id": "1", "city_name": "Al Ain" },
{ "city_id": "10", "region_id": "3", "city_name": "Jabel Ali" },
{ "city_id": "11", "region_id": "6", "city_name": "kalba" },
{ "city_id": "13", "region_id": "3", "city_name": "Jumeirah" },
{ "city_id": "14", "region_id": "3", "city_name": "Musaffah" }
];
});
</script>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<label>Emirate
<select ng-model="emriate">
<option value="">-Select-</option>
<option ng-repeat="emt in emriates" value="{emt.region_id}}">
{{emt.region_name}}
</option>
</select>
</label>
</div>
<div style="margin-top: 10px;">
<label>City
<select ng-model="city">
<option value="">-Select-</option>
<option ng-repeat="cit in cities | filter:emriate" value="{cit.city_id}}">
{{cit.city_name}}
</option>
</select>
</label>
</div>
</div>
</body>
</html>
638
asked Nov 22 '25 00:11
I think you just want to use a more accurate filter ;)
You want to use filter:{'region_id': emriate} instead of filter:emriate
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.emriates=[
{ "region_id": "1", "region_name": "Abu Dhabi" },
{ "region_id": "2", "region_name": "Ajman" },
{ "region_id": "3", "region_name": "Dubai" },
{ "region_id": "4", "region_name": "Fujairah" },
{ "region_id": "5", "region_name": "Ras al-Khaimah" },
{ "region_id": "6", "region_name": "Sharja" },
{ "region_id": "7", "region_name": "Umm al-Quwain" }
];
$scope.cities=[
{ "city_id": "2", "region_id": "1", "city_name": "Abudhabi" },
{ "city_id": "3", "region_id": "3", "city_name": "Dubai" },
{ "city_id": "4", "region_id": "2", "city_name": "Ajman" },
{ "city_id": "5", "region_id": "4", "city_name": "Fujairah" },
{ "city_id": "6", "region_id": "5", "city_name": "Ras al-Khaimah" },
{ "city_id": "7", "region_id": "6", "city_name": "Sharja" },
{ "city_id": "8", "region_id": "7", "city_name": "Umm al-Quwain" },
{ "city_id": "9", "region_id": "1", "city_name": "Al Ain" },
{ "city_id": "10", "region_id": "3", "city_name": "Jabel Ali" },
{ "city_id": "11", "region_id": "6", "city_name": "kalba" },
{ "city_id": "13", "region_id": "3", "city_name": "Jumeirah" },
{ "city_id": "14", "region_id": "3", "city_name": "Musaffah" },
{ "city_id": "15", "region_id": "10", "city_name": "Error 1" }
];
$scope.exactFilter = function(value) {
return value.region_id === $scope.emriate;
};
});
</script>
<htmL>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<label>Emriate
<select ng-model="emriate">
<option value="">-Select-</option>
<option ng-repeat="emt in emriates" value="{{emt.region_id}}">{{emt.region_name}}</option>
</select>
</label>
</div>
<div style="margin-top: 10px;">
<label>City
<select ng-model="city">
<option value="">-Select-</option>
<option ng-repeat="cit in cities | filter:exactFilter" value="{{cit.city_id}}">{{cit.city_name}}</option>
</select>
</label>
</div>
</div>
</body>
</htmL>According to the documentation (https://docs.angularjs.org/api/ng/filter/filter), if you use a string as the filter input, every attribute can be used to match the value referenced by this string, so you want to pass a more accurate filter with an object to specify the format to perform the filtering.
EDIT
Here is the solution: just add to your scope a filtering function:
$scope.exactFilter = function(value) {
return value.region_id === $scope.emriate;
};
Then use it as the filter.
Really, please check the AngularJS documentation, everything is in there ;)
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
