<select ng-model="field.value" class="form-control" ng-attr-name="{{name}}">
<option selected="selected">{{field.fieldName}}</option>
<option ng-repeat="app in field.attributes.split(',')" value="{{app}}">{{app}}</option>
</select>
In this code, my expected behaviour is , it will show the select box and it select the first option I have added selected="selected".
but it not selecting that "selected" attribute element.
I have tried this with ng-selected="true" also. It also not help for me. any suggestion for me?
You should be using the ngOptions directive - not a ngRepeat on an option element:
<select ng-model="field.value" ng-options="app as app for app in field.attributes.split(',')" class="form-control" ng-attr-name="{{name}}"></select>
Now simply set your ngModel (field.value) to the field you want selected.
Related
I am using a bootstrap form to submit data to a php page. I want that when the user doesn't make a particular selection from the given options, the form should submit either as or as null and not "SELECT ONE". Part of the code is given below. All the other data fields follow the same logic.
<div class="form-group">
<label for="smoking">Smoking Habits</label>
<select class="form-control" name="smoking" id="smoking" required>
<option data-hidden="true">SELECT ONE</option>
<option>Smoker</option>
<option>Non-smoker</option>
</select>
</div>
Any help will be appreciated. Thanks
An <option> only uses the text content as the data to submit if there is no value attribute.
You can add a value attribute to the option element, but the value has to be a string. It can be an empty string.
There is no native way to represent null in a HTML form.
<option data-hidden="true" value="">SELECT ONE</option>
I have a select with some options displaying text:
<select *ngIf="cars" class="form-control">
<option *ngFor="let car of cars" value="true">{{car.ID}}</option>
</select>
Is it possible to add an Icon at the beginning of the option? Like [icon]3
UPDATE
I have added the library font-icons to my .angular-cli.son:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome-4.7.0/css/font-awesome.min.css"
and update the code of my select to:
<select *ngIf="cars" class="form-control glyphicon">
<option *ngFor="let car of cars" value="true"> {{car.ID}}</option>
</select>
I use bootstrap 3
It tries to print an icon, but I get an empty square. Any idea?
It seems to me that you are using Bootstrap. So, it is possible to put icon inside option, like this.
<select class="form-control glyphicon">
<option value=""> Icon 1</option>
<option value=""> Icon 2</option>
<option value=""> Icon 3</option>
</select>
Sadly it is not possible using plain HTML <select>. It is possible with wrapper for select. Your own piece of code, that is displayed instead of browser's default select. I recommend you to find some library with ready-to-use wrapper. For example there is select wrapper inside Angular Material (https://material.angular.io/components/select), but you can find standalone wrappers.
Right now the search_type which JS uses later is always "people" as can be seen in the hidden input field.
How can I make it so that the selected option's value is the value tied to the name "search_type"?
<input type="hidden" name="search_type" value="people"> <!-- This obviously needs to change-->
<div class="medium-4 columns">
<select>
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
I have tried changing the name of all the options' names to search_type but this did not work. I have also tried other things, but can't figure it out. Any help would be much appreciated.
Here is the Javascript line that calls it:
search_type: $('input[name="search_type"]').val(),
Note: I am working in Zurb Foundation
Simply put, there is no need to add another input field when you already have a perfectly usable one! change your code so that the <select> includes the name attribute, like so, and get rid of the hidden input:
<div class="medium-4 columns">
<select name="search_type">
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
for some reason the default option that I want is not showing up. When I had a empty option "Select Job Status" as the default it worked. It doesn't work when the value="" is not empty. But when I created a plunkr for this post it works fine?? What could be causing it not work in my project?
newplunkr
<label style="margin-left:33px">Status:</label>
<select style="width: 100px" ng-model="currentItem.JobStatus">
<option value="Active" selected>Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
This form is for creating a new object, so the ng-model is not binding to something that would already have data.
I think you answered this when you stated:
... the ng-model is not binding to something that would already have data
Currently there is no currentItem defined in any scope, so trying to bind to the JobStatus property of an undefined variable will result with nothing.
Edit: I took too long to type this, so #Scott beat me to it.
If I understand your problem correctly you want default option. Can't you use something like below.
<select style="width: 100px" ng-model="currentItem.JobStatus">
<option value="" selected>Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
Is this what you are looking for?
Thanks
With input of type text the attribute required is available. It is not the case for select inputs. So how to make them required ?
FIDDLE
<form>
<select required>
<option></option><!--If this is selected require pop up will appear -->
<option>test</option><!--If this is selected form will be submitted -->
</select>
<input type="submit">
</form>
You can make them required by using html5 attribute required just like below.
<select required>
<option value="">select an option</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>
View Example in jsfiddle http://jsfiddle.net/88rXX/
Set a default value then on form submission check to see if that default value has changed.
If you're using the JQuery validation plug-in, try this Validate select box
You do have to remember though that just because it's validated client side, doesn't mean you shouldn't also check server side.
use it based on html 5. otherwise you can use any plugin