Данные фильтра Angularjs с раскрывающимся списком

Я новичок в angularjs и javascript, поэтому, пожалуйста, будьте добры, у меня есть два раскрывающихся элемента (Ionic Select), оба из которых содержат данные из службы. Проблема в том, что мне нужно отфильтровать их, чтобы работать вместе, например: если я выберу компанию в первом раскрывающемся списке, в другом раскрывающемся списке должны отображаться только представители этой компании.

Я пытался использовать | filter: byID, как я следовал в документации Angularjs, но я не думаю, что это правильный способ сделать это, не знаю.

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

ionic-framework javascript angularjs ionic
person Community    schedule 06.08.2015    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Вы можете решить эту проблему, как мой процесс решения: мое решение похоже на вашу проблему. сначала показать список Районов и показать список Тана в соответствии с выбранным Районом. используя выражение filter

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

В контроллере:

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

Примечание: здесь filterExpression – это настраиваемая функция, возвращающая значения, когда выбранный идентификатор района равен dId в тана.

person Shaishab Roy    schedule 06.08.2015
comment
Ваше решение полностью работает? Причина, по которой я спрашиваю, заключается в том, что filterExpression в ваших фильтрах не вызывает идентификатор из вашего контроллера. @shaishabroy - person ; 06.08.2015
comment
Решение должно работать, потому что вызов filterExpression для каждого объекта thana возвращает значение true или false. Вы можете проверить PLUNKER. - person Shaishab Roy; 06.08.2015
comment
Если мое решение решило вашу проблему, примите это решение @RenaldoGeldenhuis - person Shaishab Roy; 06.08.2015
comment
сработала прелесть ,всего 2 часа b4 мой производственный релиз. tradeOffs, фильтр продолжает вызывать, вы можете это увидеть, если вы зарегистрируете его. Таким образом, цикл молчаливого дайджеста будет продолжать работать за сценой, это нормально с небольшим набором данных, но не с большим набором данных. - person sg28; 06.07.2018