select的默认选项在使用AngularJS时不起作用
[英]Default option in select is not working using AngularJS
问题描述
I am following an AngularJS tutorial, and I wanted to validate my form. 
我正在关注AngularJS教程，我想验证表单。 I decided to add a default option to the select element. 我决定为select元素添加一个默认选项。
However, even after adding selected="" , the browser won't show it as default. 但是，即使添加了selected="" ，浏览器也不会将其显示为默认值。
I have tried this without AngularJS and it works fine, so I'm guessing the script is blocking something. 我已经在没有AngularJS的情况下进行了尝试，并且效果很好，所以我猜该脚本正在阻止某些内容。
How can I define a default option for my select element? 如何为select元素定义默认选项？
PS : I'm using Google Chrome Version 44.0.2403.157 m 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>
2 个解决方案
解决方案1
0 2015-08-25 14:17:57
In your controller add another property and reference it from there: 在您的控制器中添加另一个属性，并从那里引用它：
{
action: 'Call family',
complete: false,
selected: 'selected'
}];
{
action: 'Call family',
complete: false,
selected: ''
}];
解决方案2
0 已采纳 2015-08-25 14:38:29
From the dev guide for ngSelected ; 来自ngSelected的开发指南;
The HTML specification does not require browsers to preserve the values of boolean attributes such as selected.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.