In my AngularJS web application it is possible to create an item and save it. When the user clicks on the save button, the item is showed in the sidebar on the left.
I would like that when the item is saved, it will be highlighted for some seconds (e.g. background-color) so that the user can detect where it has been saved.
This is the button to save it.
<a class="pure-button pure-button-primary" ng-click="NewOrUpdateItem()">Save</a>
Need any other details?
any idea about this issue?
Thank you in advance.
You could use the ngAnimate module of angular. ngAnimate
see here for a working example
var module = angular.module("app", ['ngAnimate']);
....
I guess a proper answer will depend on your markup and list of items, if you could put a bin would be helpful. Anyway I have put this simple example together, maybe it could give you some ideas.
When a item is saved, $scope.saved is set to true and ngClass is used to create the highlight effect, then use $timeout to unset saved. I think a directive could be a better place for this logic.
Here is the JSBIN
Related
I encounter the problems of modal-backdrop hidekeep append in my ionic view.
I need to call modal for my code. In my case, if the students click to the button check the answer then the modal of marking status will comes out.
However, If I repeatedly answer a lot of questions, the modal-backdrop hide append everytime I click the button.
Is it anyway to clear the cache for the modal like in <ion-view cache-view="false"></ion-view>?
You need to use ionic modal remove instead of hide.. Refer this Ionic Documentation.
http://ionicframework.com/docs/api/service/$ionicModal/
Searched the internet a long time but didn't find a way to do the following:
Show only selected nodes and make the checkbox disabled.
Looked to use a filter (ivh-treeview-filter) to show only nodes which are selected, but providing a filter function does not work (ivh-treeview mentions it uses Angular filterFilter. Any examples around to use a filter function?
There is a ivh-treeview-visible-attribute in ivh-treeview.js, however i think there is no active code for this, anywhere an example where this works?
How can i make the checkboxes disabled?
Thanks in advance
I'm not 100% clear on what you're asking, ivh-treeview provides a jsbin template in its README for demos, perhaps you could show us what you've attempted so far? I'll take a stab though.
You can definitely use ivh-treeview-filter to show only selected nodes. Define a function like so in your controller:
this.mySweetFilter = function(node) {
return node.selected;
};
And pass it to your directive:
<div ivh-treeview="vm.treeData"
ivh-treeview-filter="vm.mySweetFilter">
</div>
Here's a fully working demo that lets you toggle whether all nodes are visible or just the selected ones: http://jsbin.com/nirovahupa/1/edit?html,js,output.
As for disabling checkboxes dynamically - there's nothing baked in to the directive to allow you to do this. You can however (and are encouraged to) use your own custom node templates and it would be a simple matter of hiding the treeview checkboxes and showing your own disabled ones as needed.
Hope that helps!
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"`
Folks,
I am trying to implement a vertical navbar in my page. This page will be rendered by Angular.
Somehow I am not able to get this to working. not sure what I am missing here.
Clicking on different tabs does not display their respective pages.
Any clues anyone can provide will be greatly appreciated.
here is a plnkr I have created for troubleshooting:
http://plnkr.co/edit/dzfv8VMWCJk8cywgy5mm
You need to dynamically set the classes of elements under nav-tabs and tab-content. The easiest way to accomplish this is to use ng-class attribute that calls a function in your controller to return appropriate class for each tab. To set the active tab, use ng-click on the nav-tabs.
Here is a working version in Plunker:
http://plnkr.co/edit/UBBq7V8mdyqllBHdwegY
I have setup a plunker to demonstrate my question:
http://plnkr.co/edit/xVtli2DKzNDCU1W99gOE?p=preview
The plunker lists the people with their brief details. What I need is, when the above boxes gets clicked, the complete person's details should be displayed in the "person-list" div.
How can we achieve using Angular JS?
Thanks for reading.
Something like this plunkr? The ng-click will set the scope with the selected person.