这段代码中出现了什么是空白选项?

时间:2022-11-16 09:10:00

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

我似乎无法让那个空白的选项消失。关于如何做的任何建议? AngularJS没有给我任何有用的信息,我试图从*应用很多建议。

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>

3 个解决方案

#1


0  

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

改变this.foo = 2;到对象赋值this.foo = {value:2};

#2


0  

Seems like removing the track by part will solve this issue

似乎删除部分轨道将解决此问题

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

#3


0  

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

我解决了这个问题我无法让ng-options正常工作,但ng-repeat选项与ng-value有关:

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>

#1


0  

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

改变this.foo = 2;到对象赋值this.foo = {value:2};

#2


0  

Seems like removing the track by part will solve this issue

似乎删除部分轨道将解决此问题

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

#3


0  

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

我解决了这个问题我无法让ng-options正常工作,但ng-repeat选项与ng-value有关:

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>