Javascript Angularjs使用下拉菜单筛选数据

我对angularjs和javascript有点陌生，所以请友好一点，我有两个下拉项，它们都包含来自服务的数据。问题是，我需要过滤它们以便协同工作，比如：如果我在第一个下拉列表中选择了一家公司，那么只有该公司内部的代表才会显示在另一个下拉列表中

我在Angularjs文档中使用了| filter:byID，但我不认为这是正确的方法，我不知道

HTML:

---

您可以像我的解决方案流程一样解决此问题： 我的解决方案喜欢你的问题。首先显示地区列表，然后根据所选地区显示Thana列表。使用过滤器表达式

在HTML中：

注意：这里的filterExpression是一个自定义函数，当选定的地区id等于thana中的dId时返回值。

var-app=angular.module'myApp'，[]； app.controller'customersCtrl'，函数$scope，$window，$http{ $scope.myFunc=functionx{ $scope.name=x.name； $scope.country=x.国家； $scope.city=x.city； $scope.x=x； $myModal.modal； }; $scope.saveData=functionx{ ifx=={ x=角度.copy$scope.names[0]； x、 Name=$scope.Name； x、 国家=$scope.Country； x、 城市=$scope.City； $scope.names.pushx； } 否则{ x、 Name=$scope.Name； x、 国家=$scope.Country； x、 城市=$scope.City； } }; $scope.newData=函数{ $scope.name=； $scope.country=； $scope.city=； $scope.x=； $myModal.modal； }; $scope.myDelete=functionx{ ifx.Name=&&x.Country==&&x.City=={ var index=$scope.names.indexOfx； $scope.names.index，1； } 否则{ var deletedata=$window.confirm“您绝对确定要删除吗？”； 如果删除数据{ 警惕“我是”； var index=$scope.names.indexOfx； $scope.names.index，1； } } }; $scope.filterExpression=functionx{ //警报$scope.country.id； 返回x.countryId==$scope.country.countryId； }; $scope.names=[{Name:Alfreds Futterkiste，城市：，国家：}，{Name:Ana Trujillo Emparedados y helados，城市：，国家：}] $scope.countryList=[ {国名：巴基斯坦，国号：1}， {countryName:UK，countryId:2}， {国名：瑞典，国号：3} ]; $scope.cityList=[ {城市名称：卡拉奇，城市ID:1，国家ID:1}， {城市名称：伦敦，城市ID:2，国家ID:11}， {城市名称：瑞典城市，城市ID:3，国家ID:3} ]; }; 引导示例 .表tr{ 光标：指针； } 悬停行 .table hover类在表行上启用悬停状态：

高级工程师 名称 国 城市 行动 {{$index+1}} {{x.Name} {{x.Country.countryName} {{x.City.cityName} &时代； 编辑记录 保存记录 姓名： 国家： -> 城市： 拯救 删去

---

你的解决方案完全有效吗？我询问的原因是过滤器自身中的filterExpression没有从控制器调用id@Shaishabroy该解决方案应该可以工作，因为filterExpression调用每个thana对象，并且它返回true或false值。您可以检查我的解决方案是否解决了您的问题。请接受此解决方案@RenaldoGeldenhuisworked charm，仅需2小时b4我的产品发布。权衡，过滤器一直在调用，如果您记录它，您可以看到它。因此，静默摘要循环将继续在幕后运行，对于小数据集来说没问题，但对于大数据集则不行

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

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

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

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