select的默認選項在使用AngularJS時不起作用

Question

我正在關注AngularJS教程，我想驗證表單。 我決定為select元素添加一個默認選項。

但是，即使添加了selected="" ，瀏覽器也不會將其顯示為默認值。

我已經在沒有AngularJS的情況下進行了嘗試，並且效果很好，所以我猜該腳本正在阻止某些內容。

如何為select元素定義默認選項？

PS ：我使用的是Google Chrome版本44.0.2403.157 m

 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']);

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

 <!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>

Answer 1

在您的控制器中添加另一個屬性，並從那里引用它：

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

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

  }];

Answer 2

來自ngSelected的開發指南;

HTML規范不需要瀏覽器保留布爾屬性（例如selected）的值。 （它們的存在表示true，而它們的缺失表示false。）如果將Angular插值表達式放入此類屬性中，則當瀏覽器刪除該屬性時，綁定信息將丟失。 ngSelected指令解決了選定屬性的此問題。 瀏覽器不會刪除此補充指令，因此提供了永久可靠的位置來存儲綁定信息。

select的默認選項在使用AngularJS時不起作用

問題描述

2 個解決方案

解決方案1
0 2015-08-25 14:17:57

解決方案2
0 已采納 2015-08-25 14:38:29

select的默認選項在使用AngularJS時不起作用

問題描述

2 個解決方案

解決方案1 0 2015-08-25 14:17:57

解決方案2 0 已采納 2015-08-25 14:38:29

解決方案1
0 2015-08-25 14:17:57

解決方案2
0 已采納 2015-08-25 14:38:29