选择angularjs中的第一个选项

时间:2017-04-15 23:22:46

标签: javascript angularjs

我有一点问题我只需要在我的选择中使用我的第一个元素,目前我只有一个白色的行,

这是我的小代码

 <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

$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'}

                        ]

这是一个吸虫

http://plnkr.co/edit/aDUGvrvJjszq07Sjh0TI?p=preview

感谢您的帮助

2 个答案:

答案 0 :(得分:2)

有关ng-options所谓选项的特殊指令,您也可以参考ng-module的名称并设置它&#39 ; s默认。

此处的工作解决方案:http://plnkr.co/edit/eHMoEqVxTv5QQh12FWv1?p=preview

的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:

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

答案 1 :(得分:0)

初始化选择值的表达式错误;你不应该使用ng-repeat中的别名,而应该使用原始数组的名称。

 ng-init="somethingHere = option[1]"

  ng-init="somethingHere = dateHeureAdd[1].value"

此外,您必须使用选择的ng模型进行分配,这在您的情况下是不同的。

Corrected Example