Here's the custom directive I'm using:
<custom-select custom-model="newStuff">
<div ng-if="itemsLoaded">
<select ng-disabled="model.disabled" data-placeholder="test" class="select-search
select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option ng-if="model.placeholder" value="" class="ng-scope"></option>
<option value="XYZ">XYZ</option>
<option value="ABC">ABC</option>
</select>
<span class="select2 select2-container>
Has random stuff
</span>
</div>
</custom-select>
I'm trying to click on the
<span class="select2 select2-container>
But I'm unable to. How should I do this on protractor?
Have you tried with css?
element(by.css('[ng-if="itemsLoaded"] .select2.select2-container'));
Or just the class
element(by.css('.select2.select2-container'));
Related
I'm trying to figure out where I should put my spread operator inside of my Semantic UI form.
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu" {...gender}>
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
</div>
</div>
function validate(values) {
const errors = {};
console.log(values.gender);
}
Currently you can see I have my spread operator, {...gender}, in the div with class menu. When I select from the dropdown box it willlog undefined.
Anyone have an idea?
I had to learn a little bit more about Semantic CSS classes. Here is the code that creates a nice dropdown using Redux Form
<div className="field">
<select className="ui dropdown input" {...options}>
<option value="">This is the header side the input</option>
<option value="1">Option 1</option>
<option value="0">Option 2</option>
<option value="2">Option 3</option>
</select>
</div>
If you don't give the option a value it will see it as your header/title. IT will not be an option and will disappear once the user makes a choice. The {...option} is used for Redux Router's validation.
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 was trying to pass the dynamically created model value to my controller. The div and model was created dynamically. But i can't fetch the model value in my controller.
This is the model part.
<div ng-repeat="cnt in countDiv">
<div id="subDiv_{{cnt}}" >
<select ng-model="Id_['{{cnt}}']" ng-change="getDetails(cnt)">
<option value="">Select</option>
<option ng-repeat="Data in details">{{Data.name}}</option>
</select>
</div>
</div>
How can I get this model valueng-model="Id_['{{cnt}}']" in my controller ?
I works for me
<div ng-repeat="cnt in countDiv">
<div id="subDiv_{{cnt}}" >
<select ng-data-model="Id_{{cnt}}"ng-change="getDetails(cnt);">
<option value="">Select </option>
<option ng-repeat="Data in details">{{Data.name}}</option>
</select>
</div>
I have done similar as your for dynamic model .
$scope.inputs = ['foo','bar'];
$scope.filter={
'foo':"Foo",
'bar':"Bar"
}
});
and i implemented using ng-repeat like this
<div ng-repeat="filter in filters">
<input type="text" ng-model= "'Id_'+ filter" />
</div>
If i understood you right, i have made a plunker .This might help you.
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.
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