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