Geek Answers Handbook

Angular ng-options provides an empty selection option for splice

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>

When loading the vm.handheldKeys page, vm.handheldKeys array with two values ​​is found [0,24] .

When the page loads, the displayed HTML looks like this (read tab):

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

Now, through some business logic, after the user interacts with the page, there is a function that combines the vm.handheldKeys array. So, let's say the code is as follows:

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

Now I get the following rendered HTML (pay attention to the first 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 is the best way to remove an element from an array without creating this extra option? This is mistake?

I am debugging my JavaScript in WebStorm and, of course, there is only one element in the array after splicing.

Thanks.

UPDATE:

I also tried to add a filter and set the parameter 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 were to perform

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

Now the selection option:

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

Perhaps this is due to this form, in which the selection field is located, in the modal? Maybe the modal will not display correctly correctly?

+6
source share
2 answers

SOOO, my final update was correct, because it was displayed in modal mode, after deleting the module (in the middle of the digest) the option was removed from the angular model. therefore angular did not collect changes. What I ended up with was changing the logic to remove the element while the modal was closed.

It worked.

0
source

I think your code is great, so you check again that you are just writing your code as shown 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 a slice you use your code: -

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

in vm.splice function your code looks like

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

I check it on my car, and that's great.

HAPPY CODING

0
source

More articles:


All Articles