How to add and remove ng-bind from elements? - javascript

I am working on a Drag&Drop Dashboard, part of it is written with AngularJS.
I am using a select for my Dropdown-Menu:
<select ng-model="selected_option" ng-options="object.id for object in options"></select
When i select an option, i show a list of related elements:
<li ng-repeat="option in selected_option.columns"><div class="alert alert-success">{{option.header}}</div></li>
So, when i Drag&Drop the list-element to my "board" (inside given divs), and change the selected option again, all related elements are gone.
This is working as it should, of course.
But how to prevent the removing of my elements which are "draged" to
the board?
Summarize:
I have a list of elements via ng-repeat on the left.
I drag them to the right side (to my board). I wanted them to stay
there, even if i change the select.
If i drag them again to the list on the list, they should be gone
when i reselect the dropdown.
EDIT: A small JSFIDDLE
Or would it be nicer to do everything with jQuery? I love the 2-Way-Data-Manipulation from Angular, but if this ng-bind removing is too much work, i could also do it with jQuery.

Related

jQuery - having icons at the end of drop down list items with independant actions

Ive looked around a bit and not found anything so im not even sure if this is possible.
What I want to do is have a drop down list. Each list item is a specific type of a view for a list. Is it possible to add an icon at the end that when clicked will fire off a different action to just selecting the item?
So the user opens the drop down. They see View 1. At the end there is a pencil button image. If they select View 1 the list view changes. If they select the pencil it opens up the edit View dialog for that view.
Is this even possible using javascript/jQuery?
It won't be do-able with the standard select element, however it's definitely possible using divs and heavy Javascript/jQuery.
Something similar to how the jQuery plugin Chosen works - it hides the original select element and rebuilds it with divs, adding interaction with jQuery (obviously).

Polymer custom elements interfering with each other

I wrote a custom Polymer element that lets the user pick a month. You can look view the code at https://github.com/HoverBaum/month-picker
No I want to use this to select a range of dates. So the user should select a start and and end.
I added two of my elements to a page, to try this out. However for some reason I can only change the selection of the second element. This looks like the two are somehow interfering with each other. Usually I would say "of cause they use the same ids etc." but I was thinking Polymer would take care of these things.
Here is my little demo page:
<div id="timespan">
<span>Start <month-picker></month-picker></span>
<span>End <month-picker></month-picker></span>
</div>
The way the works is that it shows the selected date and when you click it a dialog is opened that lets you change the selected month. But for some reason both element only open the dialog for the second .
Was able to solve this problem by sticking more closely to the Polymer syntax. I was trying to not define everything in the options object handed the Polymer function. As it turns out that prevented me from accessing the right dialog.

how to create custom selection of div elements?

I want to make some divs which I can select.
JSFIDDLE
I also want to shift select the divs and multiple dives should only be selected if the user press crontroll (like in a normal windows explorer).
How can I do that?
A few years back I tried to make my own tree viewer that allowed fancy selecting features and expanding using divs and CSS. I found it much easier to use the select tag, with the size attribute so it wasn't a dropdown, the multiple attribute to give me fancy selecting abilities, and option groups to denote parent child relationships. Is that an option for you?
You can use jQuery UI library to achieve this quickly and efficiently. It works with CTRL key but not sure about SHIFT key.
Here's the link: http://jqueryui.com/selectable/

jQuery UI Selectable Across Connected Sortable Lists

I have successfully managed to hack together (with the help of other posts), this example
here (code and live example)
which is a jQuery UI sortable and selectable comprised of three connected lists. There is also a restriction on it so that only one item may be selected at a time.
If you look at the demo you will see that selection is only possible across items of the same list. My question is how I can make selection go across multiple connected lists.
Any help is much appreciated.
Try wrapping around your sortables with a div. For example: <div id="sortables">.
Then change your selector from:
$("#list1, #list2, #list3").selectable
to:
$("#sortables").selectable
Then add this line as a selectable option:
filter: "li",
This way will make only the <li> elements selectable within the "sortables" div.

How to put an image/icon before select option text?

Looking to place different icons in front of items/options in a HTML select box.
In theory, you could make use of the CSS background-image property in the <option> element, but that doesn't work flawlessly in (cough) IE.
Best what you can do is to use jQuery/Javascript to mimic a dropdown with a bunch of <li> or <div> elements. As far no one comes to mind (I've never had the need for such a dropdown), but you can find here an overview of the "better" jQuery dropdown plugins, there must be one which suits your needs, for example this one.
The only way to do it would be to dynamically replace the select with a DHTML dropdown, the vanilla control doesn't have that capability. Using a DHTML dropdown has the benefit that it should degrade gracefully for those with javascript disabled.
You could do it quite simply with jQuery, have your normal <select>, grab it and replace with a hidden field, have your fancy DHTML dropdown with images (hidden positioned <div> with an unordered list could do it), attach to the onclick event of the items and make that update the hidden field with the selected value.

Categories