2015-08-06 12 views
5

Sono un po 'nuovo in angularjs e javascript quindi per favore sii gentile, ho due elementi a discesa (Ionic Select) entrambi detengono i dati da un servizio. Il problema è che ho bisogno di filtrarli per poter lavorare insieme come: se scelgo un'azienda nel primo elenco a discesa, solo i rappresentanti all'interno di tale azienda dovrebbero essere visualizzati nell'altro elenco a discesa.Angularjs Filtra i dati con il menu a discesa

Ho provato a utilizzare | filter: byID come ho seguito nella documentazione Angularjs ma non penso che sia il modo giusto per farlo non lo so.

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

risposta

9

Si può risolvere questo problema come il mio processo di soluzione: mia soluzione come il vostro problema. al primo spettacolo Distretto lista e spettacolo Thana lista secondo Distretto selezionato. utilizzando filtro espressione

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 regolatore:

  $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: Qui filterExpression è una consuetudine funzione che restituisce valori quando ID distretto selezionato equivale a dId in thana.

+0

La soluzione funziona completamente? La ragione per cui chiedo è il filtro Espressione nel tuo filtro self non chiama l'id dal tuo controller. @shaishabroy –

+0

La soluzione dovrebbe funzionare perché chiamata filterExpression per ogni oggetto thana e restituisce true di valore falso. Puoi effettuare il check-in [PLUNKER] (http://plnkr.co/edit/5CoVo75Es6qP5rBcP4FX?p=preview) –

+0

Se la mia soluzione ha risolto il problema, accetta questa soluzione @RenaldoGeldenhuis –

Problemi correlati