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>
Related
I'm using angularjs and I'm trying to use bootstrap-select.
But when I enter in the url that is using the bootstrap-select doesn't appear. Just when I refresh the page.
<div class="col-sm-3 label-center">
<div class="form-group" ng-class="{'has-error': form.mapping.$invalid && submitted}">
<label>{{'Mapping' | translate}}</label>
<select class="form-control selectpicker" name="mapping" ng-model="workflowList[0]">
<option>Nothing Selected</option>
<option ng-repeat="w in workflows[0]" ng-value="w.resource_uri">{{w.name}}</option>
</select>
</div>
</div>
So my problem is as follows, i have this HTML
<div class="col-sm-4">
<p><span>Teste A/B:</span></p>
<label class="label-radio">
<input type="radio" class="radio" name="ab-test" value="true" ng-model="isTestAvailable"> Sim </label>
<label class="label-radio">
<input type="radio" class="radio" name="ab-test" value="false" ng-model="isTestAvailable"> Não </label>
</div>
<div class="col-sm-4">
<p><span>Nº de testes:</span></p>
<select class="form-control" ng-model="tests.number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
What i'm trying to do is make it so that when the user changes the select to another value i generate the given amount of test inputs via ng-repeat
<div ng-if="isTestAvailable == 'true'" ng-repeat="test in tests">
<hr>
<div class="row">
<div class="col-sm-12">
<h3>Test {{$index}}</h3>
<p><span>Specifications:</span></p>
<textarea id="teste1" class="form-control" onkeyup="resizeTextarea('test1')" data-resizable="true"></textarea>
</div>
</div>
<hr>
</div>
My controller contains this $watch
$scope.$watch("tests.number", function(newVal, oldVal) {
$scope.tests = [{}];
var i = parseInt(newVal);
for(var x = i; x <= newVal; x++) {
$scope.tests.push({});
}
});
that i tried to use in order to change the amount of test objects when the value changes, i tried using a simple variable as well and doing ng-repeat("i in tests.number") instead but that didn't work, what can i do so that the ng-repeat works with my given select option value?
I suggest to you, to use another variable instead of tests.number because you override it in your watcher.
Please check this plunker : https://plnkr.co/edit/XnV9MKjIYe1YOL4hR6Le?p=preview
I use another variable and bind ng-change instead of watch
<select class="form-control" ng-model="testNumber" ng-change="changeTestNumber()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Hi I am creating a dropdown in angular js while selecting values some whitespaces are getting attached to dropdown values.
Template
<div class="row control-group">
<label class="col-xs-4 col-sm-4 col-md-3 col-lg-3 control-label">{{::'label.identity'|translate}}</label>
<div class="col-xs-7 col-sm-7 col-md-9 col-lg-9 controls">
<select id="selectIdentity" name="selectIdentity" required ng-trim="true" ng-change="changedValue(addUser.identityProvider)" ng-model="addUser.identityProvider" >
<!-- Empty option necessary for placeholder to work -->
<!-- <option value="">{{::'define.selectval'|translate}}</option> -->
<option ng-repeat="idprovider in identityProvider"
ui-select2="select2IdentityProvider"
class="selectIdentity"
ng-selected="identityProvider"
ui-select2="select2LocaleSettings">
{{idprovider}}
</option>
</select>
<span class="help-block"
ng-show="addUserForm.selectIdentity.$error.required">
{{::'error.required'|translate}}
</span>
</div>
</div>
JS code
$scope.identityProvider = ['Customer','Employee'];
Try something like this :-
<select id="selectIdentity" name="selectIdentity" ng-model="addUser.identityProvider">
<option value="">Select</option>
<option value="value 1">{{'Value 1'}}</option>
<option value="value 2">{{'Value 2}}</option>
</select>
This code tested and there are no white space:
<select class="select2_single form-control" ng-model="module_id" tabindex="-1" ng-init="get_model_value()" id="module_id">
<option ng-repeat="item in moduleData" ng-selected="item.selected" value="{{item.id}}">{{item.module}}</option>
</select>
this will hide the first white space in dropdown
<option value="" selected hidden />
this selected hidden will hide the white space
<select id="selectIdentity" name="selectIdentity" required ng-trim="true" ng-change="changedValue(addUser.identityProvider)" ng-model="addUser.identityProvider" >
<option value="" selected hidden />
<option ng-repeat="idprovider in identityProvider"
ui-select2="select2IdentityProvider"
class="selectIdentity"
ng-selected="identityProvider"
ui-select2="select2LocaleSettings">
{{idprovider}}
</option>
</select>
If I click on option 1 from dropdown list, a div which is initially hidden should be displayed. And if I click on another option from same dropdown list different div should be displayed and previous div should be hidden. I don't want to use JQuery as I have very less knowledge about it but only AngularJs.
My code is:
<div class="card">
<div class="item item-divider" align="center">
Candidates
</div>
<div class="padding">
<div class="form-group" align="center">
<label for="sel1"></label>
<select class="form-control" id="sel1">
<option>Location 1</option>
<option>Location 2</option>
<option>Location 3</option>
</select>
</div>
</div>
</div>
EDIT
Working example
http://plnkr.co/edit/SKdeAHMmvFB85ym1hfGr?p=preview
You can use ng-model to do this
<select ng-model="location.type" class="form-control" id="sel1" ng-change="changeme()">
<option ng-option value="1">Location 1</option>
<option ng-option value="2">Location 2</option>
<option ng-option value="3">Location 3</option>
</select>
<div ng-if="location.type == '1'">Location 1</div>
<div ng-if="location.type == '2'">Location 2</div>
<div ng-if="location.type == '3'">Location 3</div>
There's only one problem, and that's that empty option at the start. Once changed it's gone.
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