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.
Related
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.
I use angularjs ng-grid.
I want to add a button for expand/collapse all rows, when ng-grid group by some field. How can I do this?
The grouped part of ng-grid will probably have a class .ngViewport .ng-scope
This is where you want to add collapse functionality I guess.
Add this div a ng-show attribute dynamically
$('.ngViewport').attr('ng-show', 'collapsed'); //This is jquery, you can use angular directives for best practice, dont have time :)
Assign it to a button. So whenever you click, it will toggle.
Click here to <strong>Toggle (show/hide)</strong> Grid
I want to attach a directive to a element. The directive will be responsible for the following:
1. Attach a click event to the element
2. Upon click.. show a drop-down
In order to perform the first activity I have added directive called "sortDirective" to my element below:
<span class="glyphicon glyphicon-arrow-down" style="font-size:0.6em" sort-directive></span>
This is done in the file layout.html
I am facing two issues:
1. the click event is not working
2. the drop-down should be shown only on click event. Right now you will notice that the drop-down (blue in color) is being shown at all the times.
I believe i am missing something here since my directive sort-directive is falling within another directive custom-table.
Am I thinking in the right direction or am I totally off ?
Plnkr Here
I wouldn't call the click event with the directive. My advice would be just to put ng-click to the span that you want to call the function from (and move the function to the controller).
You might want to look at this thread:
trigger click event from angularjs directive
Also a quick css tip - add these rules
cursor:pointer;
padding:0 0 0 5px;
to the class .header-cells.
Finally, don't you think that the arrow is too small to click it? Try binding the click event to the whole container.
i finally managed to lay this out. Those interested in seeing how it is done ..here is a plnkr
http://plnkr.co/edit/TG6aCEu2TgPq28Jcj0nM?p=info
just click on any of the headers (in orange) and you should see the results.
I'm trying to make a dropdown menu. I'm usinig the Dropdown toggle directive form ui-bootstrap. I want to customize this a little. I want the drop down title to change to the option which I have chosen.
I've made my own directive for this. In this directive i add two data objects, the options and the selected option. I also have one function which changes the selected option.
Select category: <my-directive my-options="categories" my-selected-option="selectedCategory" set-my-selected-option="setCategory(selectedCategory)"></my-directive>
Js fiddle: http://jsfiddle.net/per_strom/QW634/2/
The problem is the setCategory function is not changing.
This is my first directive I'm writing so I may be totally of. Perhaps there's a much better way to do it.
Why can't I just use a normal select box? It's a GUI thing. In this case I prefer lists.
I appreciate any help I can get!
You should pass the function reference to the directive rather than a function call. Change the part of your code to
`set-my-selected-option="setCategory"`