在 AngularJS 中使用 ng-options、ng-repeat 和 ng-selected 初始化选择答案

【问题标题】：Initializing select with ng-options, ng-repeat and ng-selected in AngularJS在 AngularJS 中使用 ng-options、ng-repeat 和 ng-selected 初始化选择
【发布时间】：2015-09-09 08:20:53
【问题描述】：

我正在尝试从使用 AngularJS 预选的一个选项开始选择，当我提交带有预选选项的表单时，我只有一个问题，没有任何反应，我有 POST 400（错误请求），问题当我手动选择选项并成功提交表单时消失。

这是 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"}
    ];
  }]);

问题是由 Angular 在 HTML 中创建的选项 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/

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-repeat ng-options

【解决方案1】：

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

Why does AngularJS include an empty option in select?

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

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

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

【讨论】：

它在 JS Fiddle 中工作，但在我的应用程序中我的 ng-model="risk.level" 和我的控制器中：$scope.update_risk_level = function(risk, item) { risk.level = item; risk.$update(function() { $rootScope.$broadcast("onRiskUpdate", risk); }); };

【解决方案2】：

HTML

<div class="col-md-3" ng-app="risk">
                <div class="form-group" ng-controller="RiskLevels">
                    <select id="id_level" name="level" class="form-control"  ng-model="selectedLevel" ng-options="item.text for item in levels"/>
                     <option value=''>Select</option>
                    </select>
                </div>
            </div>

Javascript

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

    //initial default selected  
    $scope.selectedLevel = $scope.levels[0];

  }]);

【讨论】：