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>
Related
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 have a html file as follows to enter details of user, when i press submit it should go to a file created my myself(myfile.json)which is empty now.
please provide code for that.
<ion-view view-title="employee">
<ion-content>
<!-- <input type="date" id=FromDate" name="FromDate" ng-model="FromDate" date-format="yyyy-MM-dd"/> -->
<form name="formname" ng-submit="logdata(formname)">
<h1 >{{data.FromDate|date}}</h1>
<label class="item item-input ">
<div class="input-label">date:</div>
<input type="date" name="name" value="" ng-model="data.FromDate"></input>
</label>
<div class="list">
</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Project
</div>
<select ng-options="project.name as project.name for project in projects" ng-model="data.selectedProject">
<!-- <option>createwhimsy</option>
<option selected>activity tracker</option>
<option>big iron</option> -->
</select>
</label>
</div>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Manager
</div>
<select ng-model="data.manager">
<option selected>deepa</option>
</select>
</label>
</div>
<label class="item item-input item-stacked-label">
<span class="input-label">task</span>
<textarea placeholder="task details goes here" rows="8" cols="10" ng-model="data.task"></textarea>
</label>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Estimated time(hrs)
</div>
<select ng-model="data.time">
<option selected>1</option>
<option selected>2</option>
<option selected>3</option>
<option selected>4</option>
<option selected>5</option>
<option selected>6</option>
</select>
</label>
</div>
<button type="submit" class="button button-calm">
submit
</button>
</form>
</ion-content>
</ion-view>
possible, need simple code, in controller.with pure angularjs.
I have 2 selects side by side both getting 6 columns each.
In order to get them to look correctly I have removed the left padding from the left select and the right from the right.
Using classes pull-left and pull-right does not have any effect.
However when I decrease the view port size it no longer looks correct.
What is the best way to achieve what I need?
<div class="row">
<div class="col-md-6">
<label>Min Year:</label>
<select class="form-control" ng-model="minYear" ng-options="" required>
<option value="">Min</option>
</select>
</div>
<div class="col-md-6">
<label>Max Year:</label>
<select class="form-control" ng-model="maxYear" ng-options="" required>
<option value="">Max</option>
</select>
</div>
</div>
thank.
for the decrement of size you shold add the correct col for sm and xs
div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<label>Min Year:</label>
<select class="form-control" ng-model="minYear" ng-options="" required>
<option value="">Min</option>
</select>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label>Max Year:</label>
<select class="form-control" ng-model="maxYear" ng-options="" required>
<option value="">Max</option>
</select>
</div>
</div>
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.