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.
Related
I want to create a dropdown in such a way that on click of a button new dropdown is created but it should not show the selected option of the previous dropdown. I am able to create the dropdowns on button click but I can't figure out how to not show selected options of previous dropdowns.
Simply create an Array and map all your dropdowns from that. And in onClick function of button simply pop or modify the array element. I hope you got it. Feel feel to ask doubts and for more please update the source code.
Angular material default functionality is when user selects one item from auto-completion list remaining items are not showing.
Eg: When I click on the control it's showing like this
After one item selected it is not showing remaining list.
Here I wanna show all auto-complete items even user selects one items from the list.
Is this possible with angular material? If yes could you please help how can we achieve this.
I need output like this(Below image I edited in paint).
If we are talking about basic example from https://material.angularjs.org/latest/demo/autocomplete, just try:
md-items="item in ctrl.states"
instead of
md-items="item in ctrl.querySearch(ctrl.searchText)"
because of controller filter the initial list in
results = query ? self.states.filter( createFilterFor(query) ) : self.states
We are using slickgrid in our angular directive.
And we would like to use another list directive (simple select element with input) in a cell/column of Slickgrid.
I want the list element to be visible when the grid is available, so user knows there is a list. Therefor I am using the list directive as formatter. It Is visible when the grid is rendered.
The Problem:
When the cell that holds list element is clicked, the editor mode is never fired because of the list element click event.
We thought to use an image of list that user knows there is a list, and when clicked open the list.
Is there a better way to do it?
We have managed to get it done using list directive as our rendere/formatter as well as editor.
We made our list directive as ReadOnly so it does not fire click event. And now one sees a list element when grid is rendered. And when one clicks on the cell with list, the list is automatically opened via code. The only problem we have now with this solution is that how to copy selected Item from editor to formatter (if anyone knows, please share).
Any better solution is also welcomed.
I have a select2 input box the defined like this:
<input id="searchbox" ui-select2="autoCompleteSearch" ng-model="searchedLeafs" style="width:80%;height:36px;" class="searchbox"/>
Basically, while the user can type text into the input box (and select from the suggested autocomplete list), i would also would like to enable the user to click on an angular-based button (on the same scope) which "inject" a tag into this input box (instead of the user typing it).
Does anyone can tell me how you can do it property in angularjs? i know how to do it in the old plain select2, but coulnd't find how can you manually/dynamically add items (key/value) to the list of tags.
if you want to get a simple example, lets say that instead of you typing the tags that you want to associate with stackoverflow question, you would simply click on a link/button which would add it to the list of tags yourself.
Thx
Simply push a new object into the ng-model's array and assuming it's duck-typed to the rest of the objects it should show up fine.
I have a nested list with a template by using getItemTextTpl. Template is simple it checks for a flag and if true it shows a button on a list item. If false show no button.
When on the list item I press the button (It's a delete button) I want to refresh that list item to not show the button. To make the button change I have to navigate up two levels and back down for it to update the list item.
My problem is getting the list item to refresh/Update. Can force the template to check the list item again etc? I can get the button to fire the event.
Thanks!
for the display layer:
why not just use css to apply/change the class of the delete button to hide it? then you don't have to refesh anything.
then you can programically set the value in your code, or send to the server to make sure the status is set when the view reloads at another point.