I am working on ionic and stucked on one point that I want ionic toggle button with Dropdown in a row.Means Toggle name then dropdown then button . I have created a PEN for this **http://codepen.io/anujsphinx/pen/aBBMVg** . Need help
Pointer events are turned off with CSS in ionic toggle. You have to override the css. I added class to toggle and used css to do that.
HTML:
<ion-toggle ng-repeat="item in settingsList"
ng-model="item.checked" ng-checked="item.checked" class="offPointer">
{{ item.text }}
<select>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
</ion-toggle>
CSS:
.offPointer{
pointer-events: all !important;
}
You can find the full code here. http://codepen.io/anon/pen/ZBLGeK?editors=1100
Let me know if this doesn't help you.
Related
I'm using the Bootstrap-Select plugin like this:
<select class="selectpicker dropup"></select>
<button>Add option</button>
and jQuery code:
$(function(){
$(".selectpicker").selectpicker('hide');
$(button).click(function() {
$(".selectpicker").append(`
<option value="">--Choose option--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
`);
$(".selectpicker").selectpicker('refresh');
$(".selectpicker").selectpicker('show');
});
});
But when select appears, it does not take the first option as default but has text like image. Can I change this depending on the select?
I'm using Bootstrap select for multiple choice (https://developer.snapappointments.com/bootstrap-select/) and I had to change the default behaviour, it's not the same as yours but I hope it can give an hint anyway.
In our case we had to update the default style. The default style is a bootstrap btn-default, and I was able to update it with the following code:
$('#my-select').selectpicker({
styleBase: 'form-control',
style: '',
});
More here
If you want to change the text 'Nothing Selected', set the title property to whatever you need.
eg : title="My Custom Text"
<select class="selectpicker dropup" title="My Custom Text"></select>
<button>Add option</button>
This is my page when I click on Edit the dropdown is not selected with value in the dropdown list ... Image
In edit mode i got like this ... Image
Dropdown shown with values... Image
I need like this ... Image
Here is my angular code:
<select class="form-control form-control-sm form-control-Cutom-height" id="dropdown" style="height: 38px;" ng-model="suppliment.PurchaseTypeId">
<option ng-repeat="Supple in PTSupplement" ng-selected="{{ Supple.PurchaseTypeId == suppliment.PurchaseTypeId }}" value="{{Supple.PurchaseTypeId}}" >
{{Supple.PurchaseType}}
</option>
</select>
Please help me :)
It appears as if when you display the dropdown, the your value is not be populated as the selected value properly. When using <select> in AngularJS, you can specify the ng-options attribute and use that to generate all of the <option> fields for you without doing the ng-repeat that you're doing.
From the AngularJS docs regarding the use of ngSelected:
Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
Instead use the following:
<select
class="form-control form-control-sm form-control-Cutom-height"
id="dropdown"
style="height: 38px;"
ng-model="suppliment.PurchaseTypeId"
ng-options="Supple.PurchaseTypeId as Supple.PurchaseType for Supple in PTSupplement">
</select>
I have a list of options that are occasionally longer than the width of the container; and am trying to implement a popover to show the user the whole width of the text. When I inspect the elements on my page, the popover properties and classes are applied, but I do not see any popovers. I am using angular ui.
html
<div class="col-md-12">
<label>Available Routines</label>
<select size="8" style="width: 99%;">
<option ng-repeat="item in itemList"
uib-popover="item" popover-trigger="mouseenter">
{{item}}
</option>
</select>
</div>
controller
$scope.itemList = [
"item1","item2","item3","item4","item5",
"item6","item7","item8","item9","item10",
"item11","item12","item13","item14","item15",
]
is there a limitation to popovers in a list select?
I am trying to disable/enable kendo Combobox based on the text enterted in searchString text box.
If text is entered, then combobox should be disabled and if no text is there in searchString then only the combobox should be enabled.
Here is the DOJO Link
<input type='search' ng-model='searchString' />
<div style="padding-top: 1em;">
<h4>Remote data</h4>
<select kendo-combo-box k-enable='!(searchString && searchString.length > 0)'
k-placeholder="'Select product'"
k-data-text-field="'ProductName'"
k-data-value-field="'ProductID'"
k-filter="'contains'"
k-auto-bind="false"
k-min-length="3"
k-data-source="productsDataSource"
style="width: 100%" >
</select>
</div>
I know the functionality is possible with jQuery,
$('#id').kendoComboBox({ enabled: true });
But how to do this with Angular JS? I can keep $watch() in angular controller for searchString, but the question is how to disable the combobox with Angular JS code?
You can use ng-disabled
Example:
<select
kendo-combo-box="projectCombobox"
k-data-source="projectDataSource"
k-data-text-field="'code'"
k-data-value-field="'projectId'"
k-value-primitive="true"
k-ng-model="checklist.projectId"
k-suggest="true"
k-filter="'contains'"
k-change="onProjectChange"
style="width: 100%"
ng-disabled="!DriveTagSelected">
</select>
ng-disabled="!DriveTagSelected"
Here you can define a variable based on your condition.
Got the solution.
Kendo UI creates a new $scope variable when we provide the value for the kendo-combo-box.
As per below, myCombobox
<select kendo-combo-box='myCombobox'
k-placeholder="'Select product'"
k-data-text-field="'ProductName'"
k-data-value-field="'ProductID'"
k-filter="'contains'"
k-auto-bind="false"
k-min-length="3"
k-data-source="productsDataSource">
</select>
We can use the same $scope variable in the controller to disable it.
$scope.myCombobox.enable(false);
I have updated the same DOJO
a new better way is now available by using k-ng-disabled, you won't need to $watch the variable
http://docs.telerik.com/kendo-ui/AngularJS/introduction#state-changes
I need to pop up tool tip over disabled select field, i am currently using angularjs v1.3.7, using angular-foundation tooltip to display tooltip content.
please suggest me possible solutions.
Thanks in Advance!!!
Didn't try it in the that version of Angular but I remember it was not working. You can always wrap your select field in a div and add your tooltip on it instead of your field.
<div popover-trigger="mouseenter" popover="I appeared on mouse enter!" style="display:inline-block;width:200px;">
<select disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
See a demo.