I use this select - options in my AngularJS application:
<select data-ng-model="userFilter" data-ng-options="c as c.firstname + ' ' + c.surname for c in vm.users">
<option></option>
</select>
and now I will add a glyphicon to each option value:
<span class="glyphicon glyphicon-user"></span>
is there a possibility to do it like this?
I don't know a way with ng-options, though you could use ng-repeat:
<select data-ng-model="userFilterIndex" data-ng-change ="userFilter = vm.users[ userFilterIndex ]">
<option data-ng-repeat="c in vm.users" value="{{ $index }}">
<span class="glyphicon glyphicon-user"></span>
{{ c.firstname + ' ' + c.surname }}
</option>
</select>
Related
In My Code I used simple dropdown bind with option using ng-repeat but when I bind that, it display nothing due to some extra class enabled may be in javascript. My normal code is :
<div class="col-md-6 col-sm-12">
<label>Select Employee</label>
<select class="form-control show tick" id="selectEmp" name="toEmployeeCode" required="" ng-model="toEmployeeCode">
<option value="">Select Team Member</option>
<option ng-repeat="x in AllEmployee" value="{{x.EmployeeCode}}">{{x.FirstName}} {{x.MiddleName}} {{x.LastName}}</option>
</select>
</div>
But when it load display
<div class="btn-group bootstrap-select form-control tick">
<button type="button" class="btn dropdown-toggle bs-placeholder btn-round
btn-simple" data-toggle="dropdown" role="button" data-id="selectEmp"
title="Select Team Member" aria-expanded="false">
<span class="filter-option pull-left">Select Team Member</span>
<span class="bs-caret"><span class="caret"></span></span>
</button>
<div class="dropdown-menu" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-tokens="null" role="option" aria-
disabled="false" aria-selected="true">
<span class="text">Select Team Member</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
<li data-original-index="1">
<a tabindex="0" class="" data-tokens="null" role="option" aria-
disabled="false" aria-selected="false">
<span class="text ng-binding"> </span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
<select class="form-control show tick ng-pristine ng-untouched ng-
invalid ng-invalid-required" id="selectEmp" name="toEmployeeCode"
required="" ng-model="toEmployeeCode" tabindex="-98" aria-
required="true">
<option value="">Select Team Member</option>
<option ng-repeat="x in AllEmployee" value="EMP-1004" class="ng-
binding ng-scope">ABC</option>
<option ng-repeat="x in AllEmployee" value="EMP-1007" class="ng-
binding ng-scope">PQR</option>
<option ng-repeat="x in AllEmployee" value="EMP-1008" class="ng-
binding ng-scope">ASD</option>
<option ng-repeat="x in AllEmployee" value="EMP-1009" class="ng-
binding ng-scope">ZXC</option>
<option ng-repeat="x in AllEmployee" value="EMP-1010" class="ng-
binding ng-scope">HUK</option>
</select>
</div>
But it does not work when i use my code it will not display
I use angularjs
var app = angular.module('App', ['ui.router','ui.bootstrap']);
Don't use ng-repeat in <option>, it works incorrectly. Use ng-options in select instead.
Stop ng-repeating options: use ng-options
Here using JQuery Select 2 Autocomplete Dropdown with multiple selection.
When it is use by single it is working fine,like this
But When it is use by more than one Auto complete Not Working ,like this
<div class="col-lg-6" ng-repeat="locationtype in allLocationTypes">
<b><label ng-bind="locationtype.Type"></label></b>
<div class="form-group">
<select id="LocationMapID" multiple="multiple" class="form-control" placeholder="Select Location" style="width:100%">
<option value="" disabled="disabled">--Select Location--</option>
<option ng-repeat="location in allLocations | filter :filterLocations(locationtype.ID) " value="{{location.ChildLocationID}}">{{location.ParentLocation + '-' + location.ChildLocation}}</option>
</select>
</div>
</div>
I have faced this issue before
to resolve this I have set Uniq Id for each select2 box
<div class="col-lg-6" ng-repeat="locationtype in allLocationTypes">
<b><label ng-bind="locationtype.Type"></label></b>
<div class="form-group">
<select id="LocationMapID_{{locationtype.Type}}" multiple="multiple" class="form-control" placeholder="Select Location" style="width:100%">
<option value="" disabled="disabled">--Select Location--</option>
<option ng-repeat="location in allLocations | filter :filterLocations(locationtype.ID) " value="{{location.ChildLocationID}}">{{location.ParentLocation + '-' + location.ChildLocation}}</option>
</select>
</div>
</div>
I'd like to make orderBy based on multiple select menu. for example:
Order :
<select ng-model="filterOrder">
<option value="+">- to +</option>
<option value="-">+ to -</option>
</select>
Column:
<select ng-model="filterColumn">
<option value="name">Name</option>
<option value="age">Age</option>
</select>
<div ng-repeat="user in users|orderBy:'filterOrder.filterColumn'">
{{user.name}} {{user.age}} <br>
</div>
Thanks!
You want to use the reverse argument of orderBy
<div ng-repeat="user in users|orderBy:filterColumn: filterOrder == '-'">
The expression filterOrder == '-' will return a boolean for that argument
I am new to angularjs. I want to add a placeholder to my dropdown.
I am not hard coding my dropdown values, it's coming from some where. Can you tell me where i did mistake.
<div class="row form-group">
<label class="col-md-3">Action<span style="color: #b94a48">*</span></b></label>
<div class="col-lg-3 col-md-7" style="padding: 0px;">
<div class="dropdown select" style="width: 100%;">
<select name="wlOrdActType" class="dropdown multiple" placeholder="-- Please Select --"
ng-model="wlOrdActType"
ng-options="obj.name as obj.name for obj in ordertypeList"
style="width: 100%;">
<option></option>
</select>
</div>
</div>
</div>
Here every thing is working. But placeholder is not place on the dropdown
<option value="" disabled selected>Please Select</option>
You can do something like this:
<select ng-model="wlOrdActType" ng-options="obj.name as obj.name for obj in ordertypeList">
<option value="" selected="selected">Choose one</option>
</select>
Could also try this:
<select required class="form-control" ng-model="myModel"
ng-options="item as item.title for item in list">
<option value="" label="-- Select option --" disabled selected="selected">
</option>
</select>
While having the model set to an empty string in the controller.
$scope.myModel = "";
I am using Angular v1.6.6. So, check for older version's compatibility. I believe the below code should work v1.5 onwards.
$scope.ordertypeList = ordertypeListFromApiCall; // Get the collection from API
$scope.ordertypeList.splice(0,0, {'id' : '', 'name' : 'Select Order Type...' } );
$scope.wlOrdActType = $scope.ordertypeList[0];
And in the HTML,
<select class="form-control" ng-model="wlOrdActType" required ng-options="ordertype.name disable when ordertype.id == '' for ordertype in ordertypeList track by ordertype.id">
</select>
In the itemSelected function, make sure that the id of $scope.wlOrdActType is not empty
I want to filter my table using select value. In my code below, using input type=text... filter works just fine. But i don't know how to filter using select value.
<div class="columns large-2-5">
<select name="categorySelector"
class="selectbox"
ng-model="search"
ng-options="category.name for category in categories">
<option value="">Select Category</option>
</select>
</div>
<div class="row">
<input type="text" ng-model="search.name">
<table class="grid">
<tbody ng-repeat="image in imageList | filter: { category: search.name }">
<tr photolistsetting-Directive
title="{{ image.name }}"
ref="{{ image.url }}"
category="{{ image.category }}">
</tr>
</tbody>
</table>
</div>
select list is made of objects. Maybe i can't access an object property ?
Thank you.
Use this:
<select name="categorySelector"
class="selectbox"
ng-model="search.name"
ng-options="category.name for category in categories">
<option value="">Select Category</option>
</select>
Edit: Sorry I pointed out incorrect earlier.
Can you post "categories" and "imageList" array here?