Angularjs Filtruj dane z rozwijanym

Question

Jestem trochę nowy w angularjs i javascript, więc proszę być uprzejmy, mam dwa dropdown items (Ionic Select), oba z nich przechowuje dane z usługi. Problem polega na tym, że muszę je odfiltrować, aby współpracować, tak jak: jeśli wybiorę firmę z pierwszej listy rozwijanej, tylko powtórzenia w tej firmie powinny być wyświetlane na drugiej liście rozwijanej.

Próbowałem używać | filter: byID, jak śledziłem w dokumentacji Angularjs, ale nie sądzę, że jest to właściwy sposób, aby to zrobić, nie wiem.

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

Answer 1

Można rozwiązać ten problem jak mój proces rozwiązania: jak moje rozwiązanie problemu. na pierwszym pokazie District lista i pokaż Thana lista według wybranej dzielnicy. stosując filtr wyrażenie

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

W sterowniku:

  $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: Tutaj filterExpression jest zwyczaj funkcja zwracająca wartości, gdy wybrany identyfikator dzielnicy jest równy dId w thana.