Angularjs Filter data with dropdown
You may solve this problem like my solution process: my solution like your problem. at first show District list and show Thana list according to selected District. using filter expression
In HTML:
<div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> District List</label></div>
<div class="col-md-4">
<select class="form-control" ng-model="selectedDist" ng-options="district.name for district in districts">
<option value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Thana List</label></div>
<div class="col-md-4">
<select class="form-control" ng-model="selectedThana" ng-options="thana.name for thana in thanas | filter: filterExpression">
<option value="">Select</option>
</select>
</div>
</div>
</form>
</div>
In controller:
$scope.selectedDist={};
$scope.districts = [
{id: 1, name: 'Dhaka'},
{id: 2, name: 'Goplaganj'},
{id: 3, name: 'Faridpur'}
];
$scope.thanas = [
{id: 1, name: 'Mirpur', dId: 1},
{id: 2, name: 'Uttra', dId: 1},
{id: 3, name: 'Shahabag', dId: 1},
{id: 4, name: 'Kotalipara', dId: 2},
{id: 5, name: 'Kashiani', dId: 2},
{id: 6, name: 'Moksedpur', dId: 2},
{id: 7, name: 'Vanga', dId: 3},
{id: 8, name: 'faridpur', dId: 3}
];
$scope.filterExpression = function(thana) {
return (thana.dId === $scope.selectedDist.id );
};
N.B: Here filterExpression is a custom function that return values when selected district id equal dId in thana.
Admin
Updated on July 09, 2022Comments
-
Admin almost 2 years
I am kinda new in angularjs and javascript so please be kind, I have two dropdown items (Ionic Select) both of them holds data from a service. The issue is that I need to filter them in order to work together like: if I choose a company in the first dropdown list, only the reps inside of that company should display in the other dropdown list.
I tried using
| filter: byID
as I followed in Angularjs documentation but I do not think it is the right way of doing this don't know.HTML:
<label class="item item-input item-select""> <div class="input-label"> Company: </div> <select> <option ng-repeat="x in company">{{x.compname}}</option> <option selected>Select</option> </select> </label> <div class="list"> <label class="item item-input item-select"> <div class="input-label"> Rep: </div> <select> <option ng-repeat="x in represent">{{x.repname}}</option> <option selected>Select</option> </select> </label>
Javascript:
/*=========================Get All Companies=========================*/ $http.get("http://localhost:15021/Service1.svc/GetAllComp") .success(function(data) { var obj = data; var SComp = []; angular.forEach(obj, function(index, element) { angular.forEach(index, function(indexN, elementN) { SComp.push({compid: indexN.CompID, compname: indexN.CompName}); $scope.company = SComp; }); }); }) /*=========================Get All Companies=========================*/ /*=========================Get All Reps=========================*/ $http.get("http://localhost:15021/Service1.svc/GetAllReps") .success(function(data) { var obj = data; var SReps = []; angular.forEach(obj, function(index, element) { angular.forEach(index, function(indexN, elementN) { SReps.push({repid: indexN.RepID, repname: indexN.RepName, fkc :indexN.fk_CompID}); $scope.represent = SReps; }); }); }) /*=========================Get All Reps=========================*/
-
Admin over 8 yearsDoes your solution work entirely? The reason I ask is the filterExpression in your filter selfs does not call the id from your controller. @shaishabroy
-
Shaishab Roy over 8 yearsThe solution should work because filterExpression call for each thana object and it return true of false value. You can check in PLUNKER
-
Shaishab Roy over 8 yearsIf my solution solved your problem please accept this solution @RenaldoGeldenhuis
-
sg28 almost 6 yearsworked charm ,just 2 hours b4 my production release. tradeOffs ,the filter keeps on calling ,you can see it ,if you log it .so a silent digest cycle will keep running behind the scene ,it's fine with small data set but not with large data set