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，当然，在拼接之后，数组中只有一个项目。

感谢。

UPDATE：

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

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

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

“快乐编码”

Answer 2

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

这很有用。

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

UPDATE：

更新2：

2 个答案: