I have generated SELECT list by php.
How I can select some option in this select list?
<select name="language[]" ng-model="formData.language" id="language" ng-required="true">
<option value="72" selected="selected">Fulfulde</option>
</select>
Try to use ng-options attribute
<select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"> </select>
For more info my go through this link
I'd recommend you to use ng-options directive to work with select box.
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
Working Plunkr
Related
How can I pre-select an option, when I have the options repeated using ng-repeat, as so:
<select data-ng-model="info.country" ng-change="changeCountry()" name="country" required>
<!-- <option selected disabled hidden value=''></option> -->
<option data-ng-repeat="country in countries" value="{{country.id}}">{{country.countryName}}</option>
</select>
The data-ng-model returns the number 3 , the method ng-change="changeCountry()" uses the same number in its implementation.
I need the pre-selected item to be 3 and not 1 (this will be reduced by 1, since it is an array, but I think you get the idea)
I need to pre-select the item. Is this possible, and how can one achieve such result?
CodePen here.
ng-repeat on <options> converts id to string. This is a reason why it doesn't work.
{"country":3} vs {"country":"3"}
You can solve it by using ng-options:
<select data-ng-model="info.country"
ng-change="changeCountry()" name="country"
ng-options="c.id as c.countryName for c in countries"
required>
</select>
I managed to achieve this by using ng-options:
<select ng-options="country.id as country.countryName for country in countries" ng-model="info.country" ng-change="changeCountry()" name="country" required></select>
I need a multi select for my form and I m using the bootstrap select picker but my select option data is loaded from API dynamically and I using ng-repeat to show the option in the select tag. But my select doesnt show up any options. May i know what wrong with my code?
If i use the default html5 multiple select it can show all the data rows.
<select class="form-control" ng-model="inputUserPermission" size="10" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
Use bootstrap select picker doesnt work.
<select class="form-control selectpicker" ng-model="inputUserPermission" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
Removing select-Multiple will fix it I suppose.
<select class="form-control selectpicker" ng-model="inputUserPermission" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
I have two options like '+' and '-' in Select Tag. Here is my Code
<select kendo-drop-down-list k-ng-model="Directions">
<option ng-selected="Direction==0" value="0">+</option>
<option ng-selected="Direction==1" value="1">-</option>
</select>
when removing the 'kendo-drop-down-list' in select tag ng-select is working fine.
I want to keep kendo-drop-down-list along with ng-select should work.
By default angular uses an empty value if nothing has been selected in a <select>. How can I change this to a text that says Please select one?
You didnt provide any code so I can't give an example relative to your code, but try adding an option element, e.g.
<select ng-model="item" ng-options="item.category for item in items"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
Via the ng-selected attribute:
<select>
<option>Hello!</option>
<option ng-selected="selected">Please select one</option>
<option>Another option</option>
</select>
Check out the reference: https://docs.angularjs.org/api/ng/directive/ngSelected
I would like to have a select with a placeholder in angularjs with bootstrap. The solutions I have found do not work with angular
Here is my angular markup:
<select ng-model="myModel"
ng-options="p.name for p in ..."
class="form-control list-selector required">
<option value='' disabled selected>Please Choose</option>
</select>
If someone has a working solution...
thanks :)
You need to add an empty option to your select:
<option value="">- Please Choose -</option>
Here is a working example: http://jsfiddle.net/DianaNassar/FShdc/
For Angularjs Versions and reactive forms , if you are using ngValue to bind values in options , the following type of solution will work:
<option value='' selected ng-value="null">Please Choose</option>
For Angular 2+ Versions something like this will work-
<select class="form-control"
formControlName="roomType"
(change)="changeRoomType($event)">
<option [ngValue]="null" selected>Room Type</option>
<option *ngFor="let room of roomTypes" [ngValue]="room">{{room}}</option>
</select>
For reference, check this link out-https://netbasal.com/angular-quick-tip-how-to-show-a-placeholder-in-select-control-bab688f98b98