javascript - 获取动态选择选项以在角度js中从0到n范围内选择多个数字

Question

我想从用户那里获取范围，并根据用户可以使用角度 js 从 select 语句中选择多个选项的范围。请帮忙

<input type="text" ng-model="range" placeholder="enter range">
<select multiple name="selectValue" id="selectValue" ng-model="selectValue" >
  <option value="i" ng-repeat="i in range">hi</option>
</select>

Answer 1

我只想取两个不同的值。一个用于ng-model输入（rangeInput），另一个用于ng-model选择列表（selectValue）。

然后我可以enter使用ng-keyup="$event.which === 13 && vm.addToRange()"

在控制器的addToRange()方法中，我将split输入范围与-，reverse以获取最大滚动数，number通过在表达式前面加上将其更改为类型+。这就是这里发生的事情：

const total = +this.rangeInput.split('-').reverse()[0];

一旦我得到总数，我就可以生成rangeusingArray的fill方法，该方法将为我生成数组。然后，我将映射输入以从 1 开始并将下一个元素递增 1。这就是以下行的作用：

this.range = Array(total).fill(1).map((x, y) => x + y);

最后，我可以将range输入重置为空字符串。

模板：

<input 
  type="text" 
  ng-model="vm.rangeInput" 
  placeholder="enter range"
  ng-keyup="$event.which === 13 && vm.addToRange()">

<br>
<br>

<select 
  class="width"
  ng-change="vm.selectValueChanged()"
  multiple 
  name="selectValue" 
  id="selectValue" 
  ng-model="vm.selectValue">
  <option ng-value="i" ng-repeat="i in vm.range">{{i}}</option>
</select>

控制器：

class HomeCtrl {
  constructor($scope) {
    'ngInject';

    this.range = [];
    this.rangeInput = '';
    this.selectValue = '';

    this.addToRange = () => {
      const total = +this.rangeInput.split('-').reverse()[0];
      this.range = Array(total).fill(1).map((x, y) => x + y);
      this.rangeInput = '';
    }

    this.selectValueChanged = () => {
      console.log(this.selectValue);
    }

  }
}

export default HomeCtrl;

这是您参考的示例 StackBlitz。

PS：我假设卷号将从 1 开始。