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!
Related
I'm using select2 in my angular web application, and i'm trying to achieve
a custom format selection for multiple selection mode, that as far as i know
is not supported by select2.
by default select2 in multiple selection mode, just puts in selection area all the selections side by side and when there is not enough space the selection area height is getting bigger.
what I'm trying to achieve is something like this:
"item1, item2, item3..." ("..." appears when there is not enough.)
I hope someone will suggest a reasonable solution for my needs,
Thanks,
Nadav.
as shown here: https://github.com/angular-ui/ui-select2 this directive is deprecated; there is a new directive here: https://github.com/angular-ui/ui-select, which appears to support multiple selections. Having said that, your question is not entirely clear and perhaps some more information would enable a better answer.
I'm stuck with Angular. I have a directive that shows a list and when the user hovers over an item, I want to show a preview of the item, with the preview being given by the directive user.
Some tricks though... I want the user to be able to filter the list using an input [which is easy on it's own] and there is some basic styling surrounding the list that I would like the directive to handle, like adding the checkboxes that well be watched to create the model for the directive.
I want the directive user to simply be able to write:
<preview-list list='unfilteredlist'>
<div>
<h1><blink>{{title}}</blink></h1>
<h2><marquee>{{html extrodinaire}}</marquee></h2>
</div>
</preview-list>
I tried using ng-transclude, but it uses a sibling scope and I've been looking for work arounds and I can't find any. The only ones I found involved writing the entire template in javascript, which honestly I can't believe people think that's an acceptable solution.
Any solutions, or is this actually completely impossible in Angular?
As i see it you have two options :
Create a preview box for each member in your list and toggle visibility on hover. This is great if you have only a few values and the preview box is heavy.
Create a transcluded directive in which - the main scope will hold the list and the currently hover element. The sibling scope will hold the preview container. Once the selected value changes the preview box will update (according to your bindings) and only thing left to do is position it.
transclude is hard at first but it pays off.
Hope this helps.
It's possible that I'm not understanding the scopes correctly, but I'm having problems getting some features of my implementation to work. One of which is explained here: https://github.com/nlaplante/angular-google-maps/issues/473
I basically get the model information in the windows directive without ng-non-bindable, which prevents ng-click from working. But my ng-click method needs the information from the model to work properly.
The other issue, which you can also see in the code example at that link, is that I need to essentially show two markers per marker - what I mean is, I need to show a "frame" and then the image for each marker, which are always going to be two separate images. Is there a way to accomplish this?
Added plunkr which demonstrates both problems: http://plnkr.co/edit/QJmHKBSV2XniqF6HX7FS?p=preview
You can see that the links within the window do not work properly (they won't deliver information from the scope because that scope is isolated ?), and the other problem is going to take a more creative approach, which is that I basically need to include two images with each marker.
Try this for your details button:
<button class="btn btn-etk-green" ng-click="$parent.$parent.$parent.deviceDetails(model.id)">Details</button>
Not sure what angular google maps is doing, but after some inspecting it looks like it's dumping all your data into the model property. So you can access it that way.
Here's the edited plunkr: http://plnkr.co/edit/zkYSqcf1735nOOd4QmBI?p=preview
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
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"`