Choose the initial selection from a dropdown menu using AngularJS

Question

Choose the initial selection from a dropdown menu using AngularJS

I am facing a minor issue where I want the first element in my select dropdown to be displayed properly rather than just a blank space.

Below is the code snippet I am currently working with:

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

In the above code, I have defined an array called "dateHeureAdd" which contains time values for selection. However, the initial display does not show any default value or placeholder at the beginning of the dropdown list.

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

If you would like to view the functionality, please visit the following Plunker link:

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

Your assistance with this matter is greatly appreciated. Thank you!

javascript angularjs

Answer 1

Answer №1

One useful directive for handling options in AngularJS is ng-options. Additionally, you can reference the name of ng-module and set its default value.

Check out this functional 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];
}]);

Answer 2

One useful directive for handling options in AngularJS is ng-options. Additionally, you can reference the name of ng-module and set its default value.

Check out this functional 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];
}]);

Answer 3

Answer №2

Your approach to initializing your select value was incorrect; instead of using the alias in ng-repeat, you should use the original array's name.

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

change it to

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

Furthermore, make sure to assign the ng-model of the select correctly, as it was different in your particular case.

Updated Example

Answer 4

Your approach to initializing your select value was incorrect; instead of using the alias in ng-repeat, you should use the original array's name.

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

change it to

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

Furthermore, make sure to assign the ng-model of the select correctly, as it was different in your particular case.

Updated Example

Choose the initial selection from a dropdown menu using AngularJS

Answer №1

Answer №2

Similar questions

Issues with Gulp and Browser Sync integration

Managing multiple sets of radio buttons using the useState hook

Develop a feature within a standard plugin that allows users to add, remove, or refresh content easily

Unable to import a text file using a semicolon as delimiter in d3

Troubleshooting a JQuery AJAX Autocomplete problem involving PHP and MySQL

The form created using jQuery is not submitting correctly because the PHP $_FILES array is empty

Three.js tutorial: Rotating items on each axis individually

Style the date using moment

Get a compressed folder from jszip containing a PDF file that is either empty or blank

The isolate scope variable is becoming undefined within the link function

What is the best way to organize columns on the front end?

transmit information to a PHP script

The Javascript calculation function fails to execute proper calculations

What could be causing my input to not activate my function?

Grab the table headings from an HTML table and store them in variables after accessing the DOM

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

tips on setting the time format in dimple.js

Vue3 is struggling to apply dynamic styling exclusively to certain buttons

Discover how to use jQuery to add CSS styles to every span element on a

Swipe to modify Array