CODEWITHSUNDEEP
javascriptangularjs
Gazano
Gazano

Reputation: 183

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

$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

thanks for your help

Upvotes: 0

Views: 4798

Answers (2)

Jakub Chlebowicz
Jakub Chlebowicz

Reputation: 529

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.

Here's working solution: 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];
}]);

Upvotes: 2

dev8080
dev8080

Reputation: 4030

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

Corrected Example

Upvotes: 1

Related Questions