Set HTML select's value

Question

I have a dropdown in my HTML page as follows:

<select id="monthBox" ng-model="month">
    <option value="{{month}}" ng-repeat="month in months">{{month}}</option>
</select>

The dropdown's datasource is months, and it's bound to the model month. Initially it has numbers from 07 to 12, and default selected is 07:

However, this datasource changes. For example, after the user clicks 'next year' button, the list becomes [01,02..., 12].

What I'm trying to achieve is, the selected value should remain as 07. But when the list changes, the selected value is automatically emptied. It becomes either 01, or an empty option, depending on the browser and device I test.

I have tried following solutions, but none worked:

1. On the click of 'next year' button, I update the model. In the controller, I make it 07 again:

$scope.model = '07';

But, even though the model is updated, the dropdown still shows 01.

2. I have tried programmatically setting the DOM's value as follows:

var element = document.getElementById('monthBox');
element.value = $scope.month;

However, this does not take any effect either. The dropdown still shows 01.

Any suggestions? Thanks.

Sure doesn't sound like a good user experience. Also you are breaking the rule of always using object in ng-model. Create a plunker demo that replicates problem — charlietfl
– charlietfl, Commented Jul 23, 2016 at 15:15
For try #1 it should be $scope.month = '07';, not $scope.model = '07';. I would suggest discarding <option ng-repeat...> and instead utilizing ng-options on the <select> element. In any case, there must be something else going on that you're not showing because what you have shown should be working (without having to use either of your numbered solutions). — Lex
– Lex, Commented Jul 23, 2016 at 17:08

developer033 · Accepted Answer · 2016-07-23 21:37:17Z

Well the main problem is that you're assigning the value to $scope.model = '07'; while your ngModel is $scope.month, so to make it work you should do the following:

$scope.month = '07';

Also I extremely recommend you to use ngOptions instead of ngRepeat. ngOptions was made exactly for <select> tag.

Take a look on this simple working demo:

(function() {
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl($scope) {
    $scope.months = [];
    $scope.month = "07";

    function load(i, maxSize) {
      while (++i <= maxSize) {
        $scope.months.push(i < 10 ? "0" + i : i);
      }
    }

    load(6, 12);

    $scope.loadMore = function() {
      load(0, 6);
      $scope.month = "07";
    }
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <select ng-options="month for month in months | orderBy: 'toString()'" ng-model="month">
  </select>
  <hr>
  <button type="button" value="load" ng-click="loadMore()">Load more</button>
</body>

</html>

I hope it helps!

"Model" was just a typo, it's correct in the actual code. But I have used ng-options and I see that a big part of the problem is solved. Thanks.

Fujiao Liu · Accepted Answer · 2016-07-23 18:10:01Z

0

try to use ng-show with $index or limitTo filer.

<select id="monthBox" ng-model="month">
    <option value="{{month}}" ng-repeat="month in months" ng-show="$index > 6">{{month}}</option>
</select>

or

<select id="monthBox" ng-model="month">
        <option value="{{month}}" ng-repeat="month in months | limitTo: 12:7">{{month}}</option>
    </select>

you can change 6 in first example to a variable.

answered Jul 23, 2016 at 18:10

Fujiao Liu

2,2732 gold badges25 silver badges28 bronze badges

Collectives™ on Stack Overflow

Set HTML select's value

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related