What's making a blank option appear in this code?

Question

I can't seem to make that blank option disappear. Any recommendation on how to do it? AngularJS is not giving me any helpful information and I tried to apply a lot of suggestions from Stackoverflow.

angular.module("myApp", []);

angular.module("myApp").component("app", {
  template: `
    <div>
      <select
        ng-model="$ctrl.foo"
        ng-options="day.value as day.label for day in $ctrl.days track by day.value"
      ></select>
    </div>
  `,
  controller: function() {
    this.days = _.range(0, 31).map(function(day) {
      if (day === 0) return {label: "No Wait", value: day};
      return {label: "" + day, value: day};
    });
    this.foo = 2;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular.js"></script>

<body ng-app="myApp">
  <app></app>
</body>

Don't think you can get rid of it, see [Why does AngularJS include an empty option in select?](https://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select) — logee, Sep 07 '17 at 00:19
Change ```this.foo = 2;``` to the object ```this.foo = { value: 2 };``` — Luke Hutton, Sep 07 '17 at 00:20
Possible duplicate of [Why does AngularJS include an empty option in select?](https://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select) — Roddy of the Frozen Peas, Sep 07 '17 at 00:29
Hey @RoddyoftheFrozenPeas I know it could be a duplicate. However after applying all the suggestions in that answer, I still face the same problem. I believe is something specific to my code at this point, so I wanted to make a separate question — Francesco Belladonna, Sep 07 '17 at 20:15

score 0 · Answer 1 · answered Sep 07 '17 at 00:23

0

Change this.foo = 2; to the object assignment this.foo = { value: 2 };

answered Sep 07 '17 at 00:23

Luke Hutton

10,612
6
33
58

`day.value as ...` is used in `ng-options` so assigning the value directly should work. – Icycool Sep 07 '17 at 04:31
Yeah I can confirm, `day.value` should work perfectly, I don't want the whole object back, only the values. – Francesco Belladonna Sep 07 '17 at 20:14

score 0 · Answer 2 · answered Sep 07 '17 at 04:30

0

Seems like removing the track by part will solve this issue

ng-options="day.value as day.label for day in $ctrl.days"

answered Sep 07 '17 at 04:30

Icycool

7,099
1
25
33

But this will force the `$$hashKey` presence on all my objects, and I really don't need it since all objects are unique based on `day.value` – Francesco Belladonna Sep 07 '17 at 20:13
There is a specific section in the [documentation](https://docs.angularjs.org/api/ng/directive/ngOptions#-select-as-) about this, maybe there can be some way to make it happen. – Icycool Sep 08 '17 at 03:48

score 0 · Answer 3 · answered Sep 08 '17 at 22:35

I solved this. I can't get ng-options to work properly, but ng-repeat on option with ng-value did the trick:

angular.module("myApp", []);

angular.module("myApp").component("app", {
  template: `
    <div>
      <select
        ng-model="$ctrl.foo"
      >
        <option
          ng-repeat="day in $ctrl.days track by day.value"
          ng-value="day.value"
        >
          {{day.label}}
        </option>
      </select>
    </div>
  `,
  controller: function() {
    this.days = _.range(0, 31).map(function(day) {
      if (day === 0) return {label: "No Wait", value: day};
      return {label: "" + day, value: day};
    });
    this.foo = 2;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular.js"></script>

<body ng-app="myApp">
  <app></app>
</body>

What's making a blank option appear in this code?

3 Answers3