We Keep Coding

How to populate a value in a select ( HTML ) list in AngularJS

I am using a select list in a particular edit form page. Whenever a particular entry has to be edited, a new state with the edit form appears. It has a select list which has to populated with one of its options (ideally the value that is fetched from the server using API has to be populated into the select).
I am using Angular JS on the client side. Could somebody please tell me how to achieve the same thing using Angular JS?
I need that initial value inserted by the user in the select to be shown up as a default when the edit page is opened.
(MOREOVER, MY PLACEHOLDER NOT WORKING:"Choose a country")
Lets say there is something like this:
<div class="col-md-8">
<select data-placeholder="Choose a Country..." class="chosen-select form-control" style="width:350px;" tabindex="2" required="" ng-model="location">
<option value="" disabled selected>Select</option>
<option ng-repeat="location in locations1" value="{{location.id}}">{{location.name}}</option>
</select>
</div>

Use ngOptions.
<select ng-options="location as location.name for location in locations track by location.id" ng-model="selected"></select>

With ng-options you can do it like this:
<div class="col-md-8">
<select ng-model="selectedLocation" ng-options="location.id as location.name for location in locations1" class="chosen-select form-control" style="width:350px;" tabindex="2">
<option value="" disabled selected>Choose a Country</option>
</select>
</div>
The location.id is set to the options value and the location.name is set to the text.
To use a placeholder in a select is kind of what the default options does for you. So I would set the default option text to "Choose a country". Se this SO answer on that topic

Angular ng-options gives empty select option on 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>
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?

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"

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.

Way to control browser's built-in autocomplete list on input tag?

There is built-in autocomplete function as a part of the input element in all major browsers. It usually drops down when user starts typing. Is there a way of controlling the list? I mean something like
<input id="abc" type="text" />
<script>
//this does not work, obviously
var cars=["Saab","Volvo","BMW"];
document.getElementById("abc").autocomplete.list=cars;
</script>
... without using JQuery ... It's probably dream-of feature, isn't it?
Nobody said it is not possible so far :)

As suggested in comments try HTML5's datalist
<input type="text" id="country" list="someCountries" />
<datalist id="someCountries">
<option label="United Stated" value="USA"></option>
<option label="United Kingdom" value="UK"></option>
<option label="Uruguay" value="URU"></option>
<option label="Brazil" value="BRA"></option>
<option label="Russia" value="RUS"></option>
</datalist>
More here

Combine input type="text" and select tag

I have a list of select elements:
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
I'd like to somehow either translate the entire list of select elements into text OR, populate a new form (with an input type=text) with the contents of the select elements list as one string of text.
I tried:
<form action="/search/{{search_type}})" method="get">
<input type="text" name="qTag">
<input type="submit" value=" Search Tags">
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
</form>
This did not work in that it not only did not accomplish what I'm trying to do but it also broke the select functionality.
In case its not very obvious, I have no experience with html or javascript or jquery, I'm just trying to get something working with temporary code, so any quick and dirty suggestion would be great.

Hello you could use html5 to achieve that easily, its called a datalist its a new form type in html5 which is very useful hope this helps - Andrew
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

First you need that the <select> element contains some <option> elements. See some reference here!
Then, you can get the list of select elements using javascript and populate it in the text field. Install jQuery and use this example to work on your code. I hope that helps you!

How to show datalist suggestions using javascript?

I find the new <datalist> generally very useful, but I think that the suggestions are not visible enough. Is there a way to trigger the display of datalist suggestions using javascript?
As an example, I have a datalist on an <input type="number"> (jsFiddle).
<label>
Enter a Fibonacci number:
<input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
<option value="0">
<option value="1">
<option value="2">
<option value="3">
<option value="5">
<option value="8">
<option value="13">
<option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>
<script>
$('#show-suggestions').click(function() {
// .showSuggestions() does not exist.
// I'd like it to display the suggested values for the input field.
$('#myinput').showSuggestions();
});
</script>
In Chrome, the full list of suggestions is shown only when the input is empty, already has focus, and the user then clicks on the input. The down arrow does not show the suggestions - it simply decrements the value.
I'd like to make the suggestions more visible. As an example I've added a button that's supposed to open the list of suggestions. What do I put in the onClick-handler?
I've used Chrome, jQuery and a number-input in this example, but I'd prefer a generic solution independent of all of those.

If you remove the type="number" your users can get the dropdownlist using the basic alt+downarrow keyboard shortcut.
If that doesn't work for you. I suggest using a hybrid approach such as https://github.com/mmurph211/Autocomplete

Picking your country from a list containing more than 200 options is an ideal candidate for an autocomplete control. Define a with child elements for every country directly in an HTML page:
<datalist id="countrydata">
<option>Afghanistan</option>
<option>Åland Islands</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
...etc...
</datalist>