2015-08-06 11 views
5

ich irgendwie bin neu in AngularJS und Javascript, so wenden Sie sich bitte freundlich sein, habe ich zwei Drop-Down-Elemente (Ionic Select) beide von ihnen halten Daten von einem Service. Das Problem ist, dass ich sie filtern, um muß zusammenarbeiten, mag: wenn ich ein Unternehmen in der ersten Dropdown-Liste auswählen, werden nur die Wiederholungen innerhalb dieser Gesellschaft sollten in der anderen Drop-Down-Liste angezeigt werden soll.AngularJS Filtern von Daten mit Drop-Down-

Ich versuchte mit | filter: byID, wie ich in Angularjs Dokumentation folgte, aber ich denke nicht, es ist der richtige Weg, dies zu tun, weiß es nicht.

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

Antwort

9

Sie können dieses Problem wie mein Lösungsprozess lösen: meine Lösung wie Ihr Problem. zuerst zeigen Bezirk Liste und zeigen Thana Liste nach ausgewählten Bezirk. mit Filter Ausdruck

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: Hier Filterexpression ist ein Brauch Funktion, die Werte zurückgibt, wenn die ausgewählte Distrikt-ID gleich dId in thana ist. ganz

+0

Funktioniert Ihre Lösung? Der Grund, den ich frage, ist die filterExpression in Ihrem Filter selfs ruft nicht die ID von Ihrem Controller auf. @shaishabroy –

+0

Die Lösung sollte da Filterexpression Aufruf arbeitet jeder für Thana Objekt und es wahr falschen Wertes zurück. Sie können [PLUNKER] einchecken (http://plnkr.co/edit/5CoVo75Es6qP5rBcP4FX?p=preview) –

+0

Wenn meine Lösung Ihr Problem gelöst hat, akzeptieren Sie bitte diese Lösung @RenaldoGeldenhuis –