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

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

这有效。