Angular ng-options gives empty select option on splice

Question

So I have an Angular view that has the following markup:

<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>

The vm.handheldKeys when page is loaded is an array with two values [0,24] .

When the page loads, the rendered HTML is the following (tabbed for readability):

<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>

This, of course, is what you'd expect.

Now, through some business logic, after the user has interacted with the page, there's a function that splices the vm.handheldKeys array. So, let's say the code looks like the following:

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

Now, what I get is the following rendered HTML (notice the first select option):

<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>

What's the best way to remove the item from the array without creating that additional option? Is this a bug?

I debug my JavaScript in WebStorm and, sure enough, there's only one item in the array after the splice.

Thanks.

UPDATE:

I also tried adding a filter and setting my options source to the filter, but I still get the same result.

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

UPDATE 2:

Just FYI, if I was to perform

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

The select option now reads:

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

It may have to do with this form in which the the select box is located is in a modal? Perhaps the modal isn't getting re-rendered correctly?

Answer 1

I think your code is perfectly fine so you check once again that you just write your code as below :

<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>

and for slice you use your code as like : -

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

in the vm.splice function your code looks like-

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

I check it on my machine and this is perfectly fine.

"HAPPY CODING"

Answer 2

SOOO, my final update was correct, because it was being rendered in the modal, the option was being removed from the angular model after the modal was being rendered (in the middle of a digest). so, angular wasn't picking up the change. What I ended up doing was changing the logic to remove the item while the modal was closed.

This worked.