javascript - Angular ng-options 在拼接上提供空选择选项

Question

所以我有一个具有以下标记的 Angular View :

<select id="ddlHandheldIds"
        name="ddlHandheldIds"
        class="form-control"
        ng-model="vm.handheldPayment.handHeldId"
        ng-options="id as id for id in vm.handheldKeys track by id"
        required
        title="select hand held id">
        <option value="">select hand held id</option>
</select>

页面加载时的vm.handheldKeys是一个数组，有两个值[0,24]。

当页面加载时，呈现的 HTML 如下(为便于阅读而标记):

<select id="ddlHandheldIds" name="ddlHandheldIds" 
        class="form-control ng-dirty ng-touched ng-valid-parse ng-valid ng-valid-required" 
        ng-model="vm.handheldPayment.handHeldId" 
        ng-options="id as id for id in vm.handheldKeys track by id"    
        required="" 
        title="select hand held id">
    <option value="" class="">select hand held id</option>
    <option value="0" label="0">0</option>
    <option value="24" label="24">24</option>
</select>

这当然是您所期望的。

现在，通过一些业务逻辑，在用户与页面交互之后，有一个拼接 vm.handheldKeys 数组的函数。因此，假设代码如下所示:

vm.handheldKeys.splice(0,1);  // Remove the '0' from the array

现在，我得到的是以下呈现的 HTML(注意第一个选择选项):

<select id="ddlHandheldIds" name="ddlHandheldIds" 
        class="form-control ng-dirty ng-touched ng-valid-parse ng-valid ng-valid-required" 
        ng-model="vm.handheldPayment.handHeldId" 
        ng-options="id as id for id in vm.handheldKeys track by id"    
        required="" 
        title="select hand held id">
    <option value="? string:0 ?"></option>
    <option value="" class="">select hand held id</option>
    <option value="24" label="24">24</option>
</select>

在不创建附加选项的情况下从数组中删除项目的最佳方法是什么？这是错误吗？

我在 WebStorm 中调试我的 JavaScript，果然，拼接后的数组中只有一项。

谢谢。

更新:

我也尝试添加一个过滤器并将我的选项源设置为过滤器，但我仍然得到相同的结果。

    vm.filteredHandheldKeys = function() {
        var ids = handheldPayments.map(function(pmt) { return pmt.handHeldId; });

        if (!vm.handheldKeys) return;

        return vm.handheldKeys.filter(function(key) {
            return ids.indexOf(key) == -1;
        });
    };

更新 2:

仅供引用，如果我要执行

vm.handheldKeys.splice(1,1);  // Remove the '24' from the array

选择选项现在显示为:

<option value="? string:24 ?"></option>

这可能与选择框所在的表单处于模态中有关？也许模态没有正确重新呈现？

Answer 1

我认为您的代码非常好，所以您再次检查您是否只是按如下方式编写代码:

<select id="ddlHandheldIds" name="ddlHandheldIds"
        class="form-control ng-dirty ng-touched ng-valid-parse ng-valid ng-valid-required"
        ng-model="vm.handheldPayment.handHeldId"
        ng-options="id as id for id in vm.handheldKeys track by id"
        required=""
        title="select hand held id">
        <option value="" class="">select hand held id</option>
      </select>

对于切片，您可以像这样使用您的代码:-

 <input type="button" name="name" value="Splice" ng-click="vm.splice()">

在 vm.splice 函数中你的代码看起来像-

vm.handheldKeys = [0,24];
  vm.splice = function () {
        vm.handheldKeys.splice(0,1);
      }

我在我的机器上检查过，这完全没问题。

“快乐编码”