如何通过代码更改带有 ng-options 的 select 中的值？

Question

我正在使用 angularjs 开发一个项目，其中一个页面上有三个 DDL (HTML)，由 "select" 使用 "ng-options" 创建，一旦我 select 编辑了三个 DDL，当我 select 编辑了第一个 DDL 时，我将另外两个置于初始状态（select 一个选项），但它不会发生，因为它们保留 selected 值或空白。

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

当你更改每个 ddls 时，我看到 class ng-dirty 和 ng-valid class (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 + '\n' + 'Detail: ' + error.data.ExceptionMessage);
    else
        alert('An error has occurred while loading the Actives list\nDetail: at service "GetList_Actives"');
});

};

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

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

我的期望是，当 selecting 第一个 ddl 时，其他两个显示选项（Select 一个选项）

Answer 1

默认选项无法在其他下拉菜单中选择，如果它不存在作为一个可供选择的选项，我已经采用了您的代码并对其进行了一些调整。

这是它：

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

请注意，其他下拉菜单中填充了默认选项，但只有在第一个下拉菜单中进行更改后才会被选中。

希望这会有所帮助。

如何通过代码更改带有 ng-options 的 select 中的值？

How to change value in a select with ng-options by code?

html

angularjs

ng-options