Блог

Я работаю над проектом с angularjs, в котором у меня есть три DDL на странице (HTML), созданные с помощью «select» с использованием «ng-options», как только я выбрал три DDL, когда я выбрал первый DDL, я перевел в начальное состояние два других (выберите опцию), но этого не происходит, поскольку они остаются с выбранным значением или пустыми.

На стороне контроллеров в .js, в переменной, которая связана с каждой из ng-моделей ddl, они устанавливают объект по умолчанию ($ scope.selectedActive= $ scope.default_option;), но это не работает

Когда вы меняете каждый из ddls, я вижу, что класс ng-dirty и класс ng-valid (class = «molecule_list ng-valid ng-dirty») Я думаю, что проблема в этом.

Это код в HTML

  <select id="ddl_actives" name="ddl_actives" ng-model="selectedActive" class="molecule_list" style="width:180px;" ng-options="active.text for active in Actives_list | orderBy: 'text'" ng-change="Select_molecule(selectedActive)"></select>
 <select id="ddl_submission" name="ddl_submission" class="molecule_list" ng-model="selectedsubmission" ng-options="event.text for event in submissionEvent_list track by event.value" ng-change="Select_submission(selectedsubmission)"></select>
 <select id="ddl_authority" name="ddl_authority" class="molecule_list" ng-model="selectedauthority" ng-options="authority.text for authority in authority_list | orderBy: 'text'" ng-change="OpenMenu_Authority(selectedauthority)"></select>
  

это код в .js
Как идентификатор загружает каждый DDL

 $scope.loadActives = function () {
var dow_user_id = Cookies.get('username');
EndpointsService.GetList_Actives.query({ dow_user_id: dow_user_id }, {}).$promise.then(function (data) {
    $scope.Actives_list = data;
    //SCP-513
    $scope.Actives_list.unshift($scope.default_option);
    $scope.selectedActive = $scope.default_option;
}, function (error) {
    if (error.data.Message != undefined)
        alert(error.data.Message   'n'   'Detail: '   error.data.ExceptionMessage);
    else
        alert('An error has occurred while loading the Actives listnDetail: at service "GetList_Actives"');
});
  

};

Это пример кода, который я использую для сброса значения в ng-модели ddl.

 $scope.Select_molecule = function (selectedActives) {
    $scope.selectedActive = $scope.default_option;
    $scope.selectedauthority = $scope.default_option;
};
  

я ожидаю, что при выборе первого ddl два других отображают опцию (Выберите опцию)

Опция по умолчанию не может быть выбрана в других выпадающих списках, если она не существует в качестве опции для выбора, я взял ваш код и внес в него некоторые изменения.

Вот оно :

HTML :

 <select id="ddl_actives" name="ddl_actives" ng-model="selectedActive" class="molecule_list" style="width:180px;" ng-options="active.text for active in Actives_list | orderBy: 'text'" ng-change="Select_molecule(selectedActive)"></select>        

<select id="ddl_submission" name="ddl_submission" class="molecule_list" ng-model="selectedsubmission" ng-options="event.text for event in submissionEvent_list" ng-change="Select_submission(selectedsubmission)"></select>

<select id="ddl_authority" name="ddl_authority" class="molecule_list" ng-model="selectedauthority" ng-options="authority.text for authority in authority_list | orderBy: 'text'" ng-change="OpenMenu_Authority(selectedauthority)"></select>
  

Контроллер :

 $scope.submissionEvent_list = [];
   $scope.authority_list = [];
   $scope.loadActives = function () {
      $scope.default_option = {
       text: 'default'
      };

     $scope.Actives_list = [
      {
        text: 'test',
        value: 'a value'
      },
      {
        text: 'test2',
        value: 'another value'
      }
     ];
     $scope.submissionEvent_list.unshift($scope.default_option);
     $scope.authority_list.unshift($scope.default_option);
     $scope.Actives_list.unshift($scope.default_option);

     $scope.selectedActive = $scope.default_option;

   };

   $scope.loadActives();

   $scope.Select_molecule = function (selectedActives) {
      $scope.selectedsubmission = $scope.default_option;
      $scope.selectedauthority = $scope.default_option;
   };
  

Обратите внимание, что другой выпадающий список заполнен параметром по умолчанию, но он не выбирается до тех пор, пока не будет внесено изменение в первый выпадающий список.

Надеюсь, это поможет.