white spaces when selecting data from dropdown - angularjs

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>

Related

JQuery Select2 Autocomplete Dropdown with multiple selection

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>

Clear form using angularjs

Problem: I am unable to clear the fields of the form completely.
Let me be more specific. When I go to the console, it appears that the previous entries are still present even though the reset button has been selected.
I have done the following in the form. I have a submit button and a reset button.
<div class="panel panel-default">
<div class="panel-body">
<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate role="form">
<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>
<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>
<!---<div class="form-group">
<select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty">
<option disabled="disabled" selected="selected" value="">Specialty</option>--->
<!---<option disabled="disabledvalue=""></option>---><!---<option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option>
</select>--->
<div class="form-group">
<select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty">
<option selected="selected" value="">Specialty</option>
<!---<option value=""></option>--->
<cfoutput query="SpFind">
<option value=#ProviderSpecialty#>#ProviderSpecialty#</option>
</cfoutput>
</select>
</div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option selected="selected" value="">City</option>
<!---<option value=""></option>--->
<cfoutput query="cityFind">
<option value=#city#>#city#</option>
<!---<option ng-selected="{{searchParam.City==#city#?true:false}} value=#city#>#city#</option>--->
</cfoutput>
</select>
<!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities" value="{{c.City}}">{{c.City}}</option> </select>--->
</div>
<div class="row">
<!---<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select id="language" name="language" class="form-control" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<!---<option value=""></option>--->
<cfoutput query="Languages">
<option value=#Language#>#Language#</option>
</cfoutput>
</select>
<!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option ng-repeat="l in Languages">{{l.Lang}}</option>
</select>--->
</div>
</div>--->
<div class="col-xs-6 no-left-padding">
<div class="form-group"><select class="form-control" id="gender" name="gender" ng-model="searchParam.Gender">
<option selected="selected" value="">Gender</option>
<!---<option value=""></option>--->
<option>Male</option><option>Female</option> </select></div>
</div>
</div>
<hr class="hrDoctor" />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
<!---<option selected="selected" value="" disabled="disabled">Miles</option>--->
<option selected="disabled" value=""></option>
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
<!---<option selected="disabled" value=""></option>
<option selected="selected" value="5">5</option>
<option selected="selected" value="10">10</option>
<option selected="selected" value="15">15</option>
<option selected="selected" value="20">20</option>--->
</select>
<div class="input-group-addon">mi</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" onclick="return checkTextField(); overlayDisplayButton();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
<div style="margin-top:10pt"><button type="reset" class="btn btn-info btn-block" ng-click="reset()">Reset</button></div>
</div>
</form>
</div>
Here is the following script to reset the form:
$scope.reset = function(form) {
form.$setPristine();
form.$setUntouched();
};
What am I missing to reset the form completely?
This should be your reset function:
$scope.reset = function() {
$scope.searchParam = {};
$scope.providerSearch.$setPristine();
$scope.providerSearch.$setUntouched();
};
where providerSearch is a form name.

Ionic - Show initially hidden divs on clicking an option from dropdown

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.

Empty options in select element on Android 5.1

I'm try to using default template for select list on ionic app
<div class="list">
<div class="item item-input item-select">
<div class="input-label"> Lightsaber </div>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</div>
</div>
for testing on my tablet with Android 5.1
But in conclusion I see only empty options in select. See screenshot
How to fix this?
try this:
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select ng-model="inputTxt.color">
<option value="" selected>--select--</option>
<option value="color" selected>Blue</option>
<option value="color">Green</option>
<option value="color">Red</option>
</select>
</label>

How to use bootstrap to automatically display users from Active Directory as I type?

I have an Active Directory. I am creating a forms page in bootstrap. As I type in a portion of the name, I want the text box to come up with suggestions. For e.g. if I type in Al, it should show Alan, Alice, Alex in a combo style box below and I can select the same using a mouse click. The names come from the Active Directory.
I googled a fair bit, but perhaps I am missing something. If bootstrap + LDAP is not the right technology stack for this, what other lightweight web based options do I have? I can't use C# or Java.
This code may be helpful for you i am using datalist tag.
<body>
<div class="container">
<div class="row">
<form class="form-horizontal" style="margin-top:10%;">
<div class="form-group has-success">
<label for="country" class="col-sm-2 control-label">Select Country</label>
<div class="col-sm-2">
<input type="text" class="form-control" list="countryname" name="country">
<datalist id="countryname">
<div>
<option value="India">
<option value="France">
<option value="Germany">
<option value="Poland">
<option value="Indonesia">
<option value="USA">
<option value="UK">
<option value="Afghanistan">
<option value="Denmark">
<option value="Finland">
<option value="Greece">
<option value="Greenland">
<option value="Greenland">
<option value="Greenland">
<option value="Greenland">
</div>
</datalist>
</div>
</div>
<div class="form-group has-success">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
The combobox works exactly as autocompletion box.

Resources