Question

我在AngularJS模板中有以下代码：

[2017Q2, 2017Q3, 2017Q4]

我想给用户一个带有选项的下拉列表：

<input
    type="number"
    id="exercise-log-duration-hours-{{ ::$id }}"
    class="form-control"
    ng-model="$ctrl.workoutHours"
    ng-change="$ctrl.updateHours($ctrl.workoutHours)"
    name="{{ ::$ctrl.inputName }}"
    step="1"
    min="1"
    required> 
  </input>

来自相应的组件文件。

我原本打算使用ui-select，但这似乎不是一个选项，因为我需要让用户能够输入不在选项列表中的数字。

Answer 1

除了"other"选项之外，您还希望使用HTML <select> (MDN)元素和AngularJS指令ngRepeat的组合来创建列表中的选项生成一个输入框（Codepen example）：

<div ng-app="example" ng-controller="ExampleController as $ctrl">
  <select id="exercise-log-duration-hours-{{ ::$id }}"
          class="form-control"
          ng-model="$ctrl.workoutHours">
    <option value="other">Other</option>
    <option ng-repeat="hour in $ctrl.hourOptions" value="{{hour}}">{{hour}}</option>
  </select>
  <div ng-if="$ctrl.workoutHours === 'other'">
    <input type="number" min="1" step="1" ng-model="$ctrl.workoutHoursOther" />
  </div>
  <p>Selected: {{$ctrl.workoutHours}}</p>
</div>

因此，在您的表单提交之前，您想要查看workoutHours的值是否等于'other'，如果是，请提交绑定到workoutHoursOther的值

AngularJS在输入字段中选择选项

1 个答案: