Angularjs Filtrer les données avec le menu déroulant

Je suis un peu nouveau dans angularjs et javascript, alors soyez gentil, j'ai deux éléments déroulants (Ionic Select), tous deux conservent les données d'un service. Le problème est que je dois les filtrer pour travailler ensemble comme si je choisissais une entreprise dans la première liste déroulante, seuls les représentants de cette société devraient afficher dans l'autre liste déroulante.

J'ai essayé d'utiliser | filter: byID | filter: byID comme je l'ai suivi dans la documentation d'Angularjs, mais je ne pense pas que ce soit la bonne façon de le faire, ne le savez pas.

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=========================*/

Vous pouvez résoudre ce problème comme mon processus de solution: ma solution comme votre problème. À la première liste de district et affiche la liste de Thana selon le district sélectionné . En utilisant l'expression du filtre

En 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>

Dans le contrôleur:

  $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 ); };

NB: Ici filterExpression est une fonction personnalisée qui renvoie des valeurs lorsque l'ID de district sélectionné est égal à DId dans thana.

Je dirais avoir un regard sur le filtre . Vous pouvez ensuite passer une chaîne, un objet ou une fonction pour limiter votre répétition ng aux valeurs souhaitées.

La raison pour laquelle je ne tape pas complètement un exemple de code ici, c'est parce que la documentation est un outil important et cela vous profitera si vous essayez de les comprendre.