在 AngularJS 中的下拉列表中设置默认值

Question

我正在尝试在 angular JS 的下拉列表中设置默认值。下面是我的代码：

<div class="dropdownIcon">
    <select name="actions" id="actions"
        ng-options="option.Value for option in Data.Actions"
        ng-focus="ActionsLabel = true" ng-blur="ActionsLabel = false;"
        ng-model="Data.EmployeeStatusChangeRoutingInput.Action"/>
        <label for="actions" class="labelColor"
            ng-class="{'dropdownLabelFloat' : (ActionsLabel || Data.EmployeeStatusChangeRoutingInput.Action != null), 'dropdownLabel' : !ActionsLabel && !Data.EmployeeStatusChangeRoutingInput.Action  }">
            Action
        </label>
</div>

我想将默认值设置为“---”并且 Id=0。在我的控制器中，我有以下代码：

var inputValues = angular.copy($scope.Data.EmployeeStatusChangeRoutingInput);
             
$scope.Data.EmployeeStatusChangeSaveInSession = {
     EffectiveDateString: inputValues.EffectiveDate.toString(),
     Action: inputValues.Action.Value,
};

我试图将此代码放入我的控制器中，以便将默认值设置为 0:

$scope.Data.Action = 0;

我在控制器中的这一行之后写了上面的行：

var inputValues = angular.copy($scope.Data.EmployeeStatusChangeRoutingInput);

通过放置此行，下拉列表的 selected 值没有更改为“---”。

如果用户没有 select 下拉列表中的任何值，则应预先 select 编辑“---”。如果用户 select 一些值，那么该值应该传递给控制器。

我们将不胜感激。

Answer 1

为了 pre-set 值，您必须给 ng-model 一个实际值。这里我加了

EmployeeStatusChangeRoutingInput: {
    Action: 'value3'
}

但是，您还需要使用以下语法形成 ng-options，使其具有 name/value 对：

ng-options="option.Name as option.Value for option in Data.Actions"

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.Data = {
      Actions: [{
        Value: 'test1',
        Name: 'value1'
      }, {
        Value: 'test2',
        Name: 'value2'
      }, {
        Value: 'test3',
        Name: 'value3'
      }],
      EmployeeStatusChangeRoutingInput: {
        Action: 'value3'
      }
    }

  }])

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="dropdownIcon">
    <select name="actions" id="actions" ng-options="option.Name as option.Value for option in Data.Actions" ng-focus="ActionsLabel = true" ng-blur="ActionsLabel = false;" ng-model="Data.EmployeeStatusChangeRoutingInput.Action"></select>
  </div>
</div>

在 AngularJS 中的下拉列表中设置默认值

Setting the default value in the drop down list in AngularJS

angularjs