Question

我正在关注AngularJS教程，我想验证我的表单。我决定在select元素中添加默认选项。

但是，即使添加selected=""后，浏览器也不会将其显示为默认值。

我在没有AngularJS的情况下试过这个并且它工作正常，所以我猜测脚本阻塞了什么。

如何为select元素定义默认选项？

PS ：我使用的是谷歌浏览器版本44.0.2403.157 m

＆＃13;

var controllers = angular.module('formsApp.Controllers', []);
controllers.controller('todoCtrl', function($scope) {
  $scope.todoList = [{
    action: 'Get groceries',
    complete: false
  }, {
    action: 'Call plumber',
    complete: false
  }, {
    action: 'Buy running shoes',
    complete: true
  }, {
    action: 'Buy flowers',
    complete: false
  }, {
    action: 'Call family',
    complete: false
  }];
  $scope.addNewItem = function(newItem) {
    $scope.todoList.push({
      action: newItem.action + ' (' + newItem.location + ')',
      complete: false
    });
  };
});

var app = angular.module('formsApp', ['formsApp.Controllers']);

＆＃13;

form input.ng-invalid.ng-dirty {
  background-color: lightpink;
}

＆＃13;

<!DOCTYPE html>
<html data-ng-app="formsApp">

<head>
  <title>Forms</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div id="todoPanel" class="panel" data-ng-controller="todoCtrl">
    <h3 class="panel-header">
		        To Do List
		        <span class="label label-info">
			        {{(todoList | filter: {complete: false}).length }}
		        </span>
	        </h3>
    <div class="row">
      <div class="col-xs-4">
        <div class="well">
          <form name="todoForm" novalidate data-ng-submit="addNewItem(newTodo)">
            <div class="form-group row">
              <label for="actionText">Action:</label>
              <input type="text" id="actionText" class="form-control" data-ng-model="newTodo.action" required="" />
            </div>
            <div class="form-group row">
              <label for="actionLocation">Location:</label>
              <select id="actionLocation" class="form-control" data-ng-model="newTodo.location" required="">
                <option selected="">Home</option>
                <option>Office</option>
                <option>Mall</option>
              </select>
            </div>
            <button type="submit" class="btn btn-primary btn-block" data-ng-disabled="todoForm.$invalid">
              Add
            </button>
          </form>
        </div>
      </div>
      <div class="col-xs-8">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>Action</th>
              <th>Done</th>
            </tr>
          </thead>
          <tbody>
            <tr data-ng-repeat="item in todoList">
              <td>
                {{$index + 1}}
              </td>
              <td>
                {{item.action}}
              </td>
              <td>
                <input type="checkbox" data-ng-model="item.complete" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

在你的控制器中添加另一个属性并从那里引用它：

{
    action: 'Call family',
    complete: false,
    selected: 'selected'
  }];

{
    action: 'Call family',
    complete: false,
    selected: ''

  }];

Answer 2

来自ngSelected的开发指南;

HTML规范不要求浏览器保留布尔属性的值，例如selected。（他们的存在意味着是的，他们的缺席意味着错误。）如果我们放一个Angular 插值表达到这样的属性然后绑定浏览器删除属性时，信息将丢失。该 ngSelected指令解决了所选属性的此问题。浏览器不会删除此补充指令提供了一个永久可靠的存储绑定信息的地方。

select中的默认选项无法使用AngularJS

2 个答案: