Ng-repeat is not showing any data in select options. is there any different way to show option value in select for ng-repeat
When I am using without class="selectpicker" in select tag. Its working fine. How can I use bootstrap select with ng-repeat.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/js/bootstrap-select.min.js"></script>
<div>
<select ng-model="selEmployee" name="selEmployee" class="selectpicker">
<option value=0>All</option>
<option ng-repeat="employee in employees" value="{{employee.Ldap | lowercase}} ">{{employee.FirstName}} {{employee.LastName}}</option>
</select>
Thanks in advance
Use ng-options:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
https://docs.angularjs.org/api/ng/directive/ngOptions
Related
I have a filter list using a select tag. I want to be able to filter the array based on the option selected. I have tried using v-model as this works with checkboxes but unfortunately doesn't work with select fields.
Any help would be amazing.
Please find my fiddle attached
<div id="app">
Selected: {{concatenated}}
<select>
<option v-for="item in vals" :select="item.selected">{{item.value}}</option>
</select>
<!--
<div v-for="item in vals">
<p>
<input type="checkbox" v-model="item.selected">{{item.value}}
</p>
</div>
-->
</div>
https://jsfiddle.net/39jb3fzw/2/
You should take a look at the docs and how they do databinding with select.
https://jsfiddle.net/s3x096u3/1/
<select v-model="selected">
<option v-for="item in vals" :value="item.value" :key="item.value">{{item.value}}</option>
</select>
With regards to your code, a select attribute on an option element doesn't do anything.
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
I am creating a list of <select>'s with ng-repeat, there is a item.quantity that I need to be selected in each select in the list, I have tried several ways without success. Any help would be appreciated.
<div ng-repeat="item in items">
<select ng-model="selCartQuantity">
<option index="1" ng-selected="item.quantity=='1'">1</option>
<option index="2" ng-selected="item.quantity=='2'">2</option>
<option index="3" ng-selected="item.quantity=='3'">3</option>
<option index="4" ng-selected="item.quantity=='4'">4</option>
<option index="5" ng-selected="item.quantity=='5'">5</option>
</select>
</div>
in your controller you put the following code (of course you change $scope.items to your actual object )
$scope.items = [{name:'aaaaa'},{name:'bbbbb'}];
$scope.options= [1,2,3,4,5];
$scope.items.forEach(function(item,index){
item.selCartQuantity= $scope.options[0];
});
and in the html markup you put the following
<div ng-repeat="item in items">
<select ng-model="item.selCartQuantity" ng-options="option for option in options"></select>
</div>
`
I would reccomend checking out the angular select driective, as you shouldn't have to do the ng-repeat at all. The select directive will automatically set the selected option to be what you have in your model.
I'd like to set the ng-class of a optiones-element as active. Unfortunately it doesn't work.
This is my option-menu:
<select>
<option ng-repeat="item in items">{{item}}</option>
</select>
and the item "one" should be active
<select>
<option ng-repeat="item in items" ng-class="{selected: item=='one'}">
{{item}}
</option>
</select>
It doesn't work. Does anyone know how to set the option tag as active?
An example of how it works is this:
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
Below is the right way "select" works in Angularjs, notice the included ng-model directive, if missing it doesn't work.
<select ng-model="selectedItemId" ng-options="item.id as item.name for item in items">
<option value="">-- choose item--</option>
</select>
to make an item of the list active, just set SelectedItemId variable assigned to ng-model at controller side.
$scope.selectedItemId = 1; //the Id belonging to the option to be selected
I see that you want to loop over the options using ng-repeat and then manually select the right option. It is nicer to use the select directive of Angular in that case:
<select ng-model="selectedItem" ng-options="items"></select>
See https://docs.angularjs.org/api/ng/directive/select for more information.
I'm using select2 tool in my project using angularjs.
While assigning value to this select2 in a grid using angularjs in first row,
it is not assigning, but if I'm trying to assign in next to first row that is from 2nd row to next, it is working fine.
Why it is happening.?
Any suggestions regarding this is welcome.
Thanks in advance.
<td ng-if="configRow.validation.valueType == 'Single Choice'" style="width:26%">
<!-- <input style="width:100%" type="text" ng-model="configRow.Value" ui-select2="selectChoices" ng-blur="addToConfig()"> -->
<div class="print-blank" >
<select ui-select2 ng-model="configRow.Value" data-placeholder="Select One" ng-change="updatedDate($index)">
<option value=""></option>
<option ng-repeat="element in configRow.validation.list track by $index" value="{{element}}" >{{element}}</option>
</select>
</div>
</td>