Bootstrap select picker with angularjs ng-repeat not working - angularjs

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>

Related

Pre-select option in select with ng-repeat

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>

add a Static option with ng-options angularJS

i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???

How to select options in Angular JS?

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

Im looking for way to make a ui-bootstrap type-ahead able to select multiple comma sepereated items

I'm trying to do something like this
but instead of having alert boxes just having comma separated values in the input feild.
Ok I'm trying ui-select2 but I'm not very clear about how to use it. I will provide samples of what I have as a working typeahead and what I have done to try to get the select2 to work.
ui-bootstrap typeahead:
<input type="text" ng-model="selectedItem.value" typeahead="item.value for item in items |filter:$viewValue| limitTo:8" typeahead-on-select="updateItem()" placeholder="select Item"/>
ui-select2 (can't load data.)
<select ui-select2 ng-model="selectedItem.value" data-placeholder="Select Item">
<option value=""></option>
<option ng-repeat="item.value for item in items" value:"{{item.value}}>{{item.label}}</option>
</select>

<select> placeholder with angular/bootstrap not working

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

Resources