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.
Related
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'm generating a dropdown list like this:
<select ng-model="myModel.someName" ng-options="item.name as item.value for item in dropdownListOptions" ></select>
This works fine but now I'd like to be able to show some more information about each item in the list as the user moves up and down it, before they click on one to select it.
In other words I need to get the value of the currently highlighted option that the mouse is over without it being clicked on.
This is not something you can get with plain Javascript and you won't do better with Angular. There is no mouse over event for option elements of a drop down list.
The only way to achieve this is to have a custom drop down list made of HTML elements to which you will attach event handlers.
You can use Bootstrap CSS for example.
On my UI, I have several buttons. I want to highlight those user have tapped for few seconds. Is there any directive or style I can use? Or I have to write my own?
Yes, what you are asking for is already available in angular-material.
Just make sure you are making your buttons as below:
<md-button class="md-raised md-primary">Zero</md-button>
Here md-button is the directive and the class you specify will change the look and feel... say md-primary, md-fab...
Angular materials documentation here
md-select is there in angular-material. You can always group together buttons if you want, place them in an md-list and they will behave as you want. And, yes, md-menu & md-dropdown are coming in next few releases.
Hi I would like to customize behavior of the ui-select little bit. I use two bootstap themed ui-select controls on my page with the help of templatecaches. In the template, I wired up arrow button click event using ng-click tag. That way I can easily catch the click event on the arrow button, and in my controller I can open a popup using function, for instance:
<button ng-click = "someFunctionInTheScope()">
For instance if I have two of those ui-select elements in my view, I need to differentiate which arrow button is clicked to display the correct popup. Since I am using the same template for two ui-select controls and since theoretically I can have any number of these controls on my page, I can not easily add a parameter to the method in the template to differentiate which arrow image of which ui-select control is clicked:
<button ng-click= "someFunctionInTheScope(1)">
Because both ui-select control would be using the same template code and 1 would be passed to the controller function for both of them.
Therefore I need to find a more clever way of changing the template dynamically once and for each control.
So I thought about having something like
<button ng-click= "someFunctionInTheScope($select.id)">
but when I debug it I see that functions parameter is undefined, every time it is clicked.
Can somebody please show me how to hack this?
There is no id property on the $select object. You're best bet is to pass something through the scope of the element containing the ui-select boxes. In other words, your code needs to generate a unique identifier for each ui-select box you have. This could be the $index property of an ng-repeat block, a timestamp, or something dependent on other context.
A little more context and I can provide a more specific answer.
I tried adding the bootstrap dropup class to a <select> using bs-select. It made the arrow point upwards but the menu was still displayed below the button. Is it possible to make a bs-select menu be displayed above the button, like it is for a regular Bootstrap "dropup" control? I tried to use BootstrapAdditions thinking that might help, but could not get it to work.