如何使用代码中的ng-options更改选择中的值？

Posted 2021-04-08

我正在开发一个带有angularjs的项目，其中我在页面上有三个DDL（html），使用“ng-options”由“select”创建，一旦我选择了三个DDL，当我选择第一个DDL时，我将其他两个（选择一个选项）置于初始状态，但不会发生，因为它们保留所选值或空白。

在.js中控制器的一侧，在链接到ddl的每个ng-model的变量中，它们设置了默认对象（$ scope.selectedActive = $ scope.default_option;），但它不起作用

当你更改每个ddl时，我看到类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中的代码如何id加载每个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 + '
' + 'Detail: ' + error.data.ExceptionMessage);
    else
        alert('An error has occurred while loading the Actives list
Detail: at service "GetList_Actives"');
});

};

这是我用来重置ddl的ng-model中的值的代码示例。

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

请注意，其他下拉列表中填充了默认选项，但在第一个下拉列表中进行更改之前，它不会被选中。

希望这会有所帮助。