Question

我试图让一个选择开始使用AngularJS预先选择的一个选项，我只有一个问题，当我提交表格时，预先选择的选项什么都没发生，我有POST 400（BAD REQUEST），当我手动选择选项并成功提交表单时，问题就消失了。

这是HTML：

<form role="form" novalidate >
<div class="form-group">
    <select id="id_level" name="level" class="form-control" ng-model="level" >
        <option ng-repeat="level in levels" ng-selected="{{level.name =='Low'}}" value="{{level.name}}">Level : {{level.name}}
        </option>
    </select>
</div>

和JS：

var app = angular.module('risk', []);
  app.controller('RiskLevels', ['$scope', function($scope) {
    $scope.levels = [
      {name : "Low"},
      {name : "Medium"},
      {name : "High"}
    ];
  }]);

问题是HTML中的angular创建的选项value="? undefined:undefined ?"

<select id="id_level" name="level" class="form-control ng-pristine ng-valid ng-touched" ng-model="level">
  <option value="? undefined:undefined ?"></option>
  <!-- ngRepeat: level in levels -->
  <option ng-repeat="level in levels" ng-selected="true" value="Low" class="ng-binding ng-scope" selected="selected">Level : Low</option>
<!-- end ngRepeat: level in levels -->
  <option ng-repeat="level in levels" ng-selected="false" value="Medium" class="ng-binding ng-scope">Level : Medium</option>
<!-- end ngRepeat: level in levels -->
  <option ng-repeat="level in levels" ng-selected="false" value="High" class="ng-binding ng-scope">Level : High</option>
<!-- end ngRepeat: level in levels -->
</select>

JS小提琴：http://jsfiddle.net/faridmax/nrybr0rf/1/

Answer 1

此stackoverflow问题将解释为什么有一个空选项

Why does AngularJS include an empty option in select?

要解决您的问题，请添加以下内容：

$scope.level = $scope.levels[0].name;

完全小提琴：http://jsfiddle.net/nrybr0rf/2/

在AngularJS中使用ng-options，ng-repeat和ng-selected初始化select

1 个答案: