在选择angularjs中选择第一个选项
[英]select first option in select angularjs
问题描述
i have a little problem i just need to have my first element in my select, for the moment i have just a white row in first, 
我有一个小问题，我只需要选择我的第一个元素，就目前而言，我只排第一行，
this is my little code 这是我的小代码
<select style="border-radius: 4px;" class="form-control" ng-model="select" ng-init="somethingHere = option[1]" id="sel1">
<option ng-repeat="option in dateHeureAdd track by option.value" value="{{option.value}}">{{option.heure}}</option>
</select>
CTRL CTRL键
$scope.dateHeureAdd = [
{value: '8', heure: '08:00'},
{value: '9', heure: '09:00'},
{value: '10', heure: '10:00'},
{value: '11', heure: '11:00'},
{value: '12', heure: '12:00'},
{value: '13', heure: '13:00'},
{value: '14', heure: '14:00'},
{value: '15', heure: '15:00'},
{value: '16', heure: '16:00'},
{value: '17', heure: '17:00'}
]
here is a plunker 这是一个矮人
http://plnkr.co/edit/aDUGvrvJjszq07Sjh0TI?p=preview http://plnkr.co/edit/aDUGvrvJjszq07Sjh0TI?p=preview
thanks for your help 谢谢你的帮助
2 个解决方案
解决方案1
2 已采纳 2017-04-16 00:15:00
There's special directive for options which's called ng-options , also you're able to reference to ng-module 's name and set it's default. 选项有一个特殊的指令，称为ng-options ，您也可以引用ng-module的名称并将其设置为默认值。
Here's working solution: http://plnkr.co/edit/eHMoEqVxTv5QQh12FWv1?p=preview 这是有效的解决方案： http : //plnkr.co/edit/eHMoEqVxTv5QQh12FWv1?p=preview
Index.html: Index.html：
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
</br>
<div ng-controller="Ctrl">
<select class="form-control" ng-model="mySelect" ng-options="date as date.heure for date in dates track by date.value">
</select>
</div>
</body>
</html>
script.js: 的script.js：
angular.module('ui.bootstrap.demo', ['ui.router','ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo', [])
.controller('Ctrl',[ '$scope', function ($scope) {
$scope.dates = [
{value: '8', heure: '08:00'},
{value: '9', heure: '09:00'},
{value: '10', heure: '10:00'},
{value: '11', heure: '11:00'},
{value: '12', heure: '12:00'},
{value: '13', heure: '13:00'},
{value: '14', heure: '14:00'},
{value: '15', heure: '15:00'},
{value: '16', heure: '16:00'},
{value: '17', heure: '17:00'}]
$scope.mySelect = $scope.dates[0];
}]);
解决方案2
1 2017-04-16 04:02:11
Your expression for initializing your select value was wrong; 您初始化选择值的表达是错误的； you should not take the alias in ng-repeat, rather the original array's name. 您不应在ng-repeat中使用别名，而应使用原始数组的名称。
ng-init="somethingHere = option[1]"
to 至
ng-init="somethingHere = dateHeureAdd[1].value"
Also, you must use the ng-model of the select to assign to, which were different in your case. 同样，您必须使用select的ng-model进行分配，这与您的情况有所不同。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.