Question

我似乎无法让那个空白选项消失。关于如何做的任何建议？ AngularJS没有给我任何有用的信息，我试图从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>

Answer 1

将this.foo = 2;更改为对象分配this.foo = { value: 2 };

Answer 2

似乎删除track by部分将解决此问题

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

Answer 3

我解决了这个问题。我无法让ng-options正常工作，但ng-repeat option与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>

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

3 个答案: