Angular ng-options在splice上给出空选择选项

Question

所以我有一个Angular视图，它有以下标记：

<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

select选项现在显示为：

<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);
      }

我在我的机器上检查它，这非常好。

“快乐的编码”

Answer 2

SOOO，我的最后更新是正确的，因为它是在模态中渲染的，在渲染模态后 （在摘要中间），该选项被从角度模型中移除。 所以，棱角分明没有发现变化。 我最终做的是改变逻辑以在模态关闭时移除项目。

这很有效。