I want to add mouseover event to every option and make an ajax call and dynamically add few more options as a sub options to that option.
How can I achieve this ?
<select>
<option ng-mouseover="someFunction()"></option>
</select>
This isn't working for me. that 'someFunction' on scope is not getting called. Is the ng-mouseover not wokring or you can't add events to option tag ?
Related
I Have used below line of code for multi selection. I am trying to multiselect on one entity but as soon as the scope is passed on to the next entity, the elements that I have selected in first entity gets unselected-
enter image description here
This is working fine on previous versions of chrome but not in 95.0
This is breaking because you're setting ng-model to the same property that ng-options is using. So the moment you select something, abcDTO.SelectionTypes gets reset to whatever you selected. ng-options and ng-model should never be set to the same property. Has nothing to do with the Chrome version.
Here's an example of it working once you change ng-model to something else.
<select
multiple="multiple" ng-multiple="true" rows="10" size="4"
ng-model="abcDTO.Selection"
ng-options="x.SelectionID as x.SelectionDesc for x in abcDTO.SelectionTypes">
</select>
I'm using ui.bootstrap.datepickerPopup in a filter header template inside ui.grid. This lets me filter rows by date. I also have a button inside the grid menu that toggles grid.options.enableFiltering.
Due to alignment issues with ui-grid, I have datepicker-append-to-body set to true for my datepickers. The first time I enable filtering, everything works fine. However, when I disable filtering and re-enable it, I get duplicate datepickers.
This is what the problem looks like:
I think the problem is that each time the filters are enabled, the following div is appended to the DOM and never removed when the filters are disabled.
<div uib-datepicker-popup-wrap=""
ng-model="date"
ng-change="dateSelection(date)"
template-url="uib/template/datepickerPopup/popup.html"
class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-date-disabled"
>
<!-- ngIf: isOpen -->
</div>
Here's a simplified plunker: http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
I get the same issue if I only use one datepicker inside the Time Range filter header.
Any ideas are greatly appreciated! Don't want to use jQuery.
I don't have an answer on why this is happening but a solution without jQuery would be to remove the pop-up when triggering the filter toggle using document.querySelectorAll()
var elements = document.querySelectorAll("div[uib-datepicker-popup-wrap]");
Array.prototype.forEach.call(elements, function(node) {
node.parentNode.removeChild(node);
});
Plunker here
When using select and option the ngblur isn't triggered once I click off the list without selecting anything.
I need to know when the options of the select and shown or hidden. Is there a directive that supports this ?
I can use ngblur and ngfocus on the Select element but nothing is ever fired on the options being shown or hidden. Any ideas?
I've run some tests on fiddle.
https://jsfiddle.net/EternalLight/x7dxkok2/
<div ng-app="testTt">
<div ng-controller="Controller" style="padding:2em;">
<select ng-focus="onFocus()" ng-blur="onBlur()">
<option>Test 1</option>
<option>Test 2</option>
</select>
<p>{{status}}</p>
</div>
</div>
It seems that the blur event is fired when you click outside of the element when the option list is hidden. When you open the option list, and then click outside, the <select> is still in focus - you can see it by the blue (or any other, depending on your browser) outline around it. Honestly, I would use ng-blur, since it takes another outside click to trigger it, and there's no way for a user to get around it.
i am working on listbox using angualrjs.
<select size="10" id="myselection" ng-model="currentItems" ng-options="s.id as s.text for s in roles" ng-change="getCategory(currentItems)"></select>
but i dont know how to add button inside listbox and perform some action after click of add button.
I would suggest you to use some component library for example Angular-UI/Bootstrap, which provides nice pack of bootstrap components.
Dropdown is probably what you want to use.
http://angular-ui.github.io/bootstrap/#/dropdown
It looks like select which contains ordinary links where you can use ng-click.
When I try to click edit on a page view, it displays the values as editable. One property, device.exists is a boolean, but when the original value is false and when I click edit, the first option true still displays. How would I make the selection option reflect the original value of the model?
<select ng-model="device.exists">
<option value="true">true</option>
<option value="false">false</option>
</select>
P.S. I didn't use ng-value because it is not available to Hawtio's AngularJS version 1.1.5 which I am using.