I am trying to get sortable to work.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
</li>
</ul>
I can't seem to grab and drag anything. The important part of this question is the 3 div's in the li
I admit, I don't understand what this line in the docs means: "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)."
And I am able to get it to work with a table.
Any insights?
Yes, the docs do say "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)." which makes it hard to have 3 divs in the li. However, there is a solution.
You can use tg-dynamic-directive (at https://github.com/thgreasi/tg-dynamic-directive) to solve this. Don't forget to include it, and put 'tg.dynamicDirective' in your dependencies. Basically you take out the middle part in between the li tags, in this case the 3 divs, and you put it in another file and link to it.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
</li>
</ul>
Then in another file put the innards, like innards.html:
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
And replace the innards with:
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<tg-dynamic-directive ng-model="c" tg-dynamic-directive-view="getView">
</tg-dynamic-directive>
</li>
</ul>
And in your controller put something like:
$scope.getView = function(item) {
if item {
return 'innards.html';
return null;
};
Anyways the docs go over it pretty well. I realize this question is pretty old but I just ran into this myself and got it working so hopefully it helps someone else.
Related
I'm trying to create a contenteditable editor where everything is a list. However if I simply give a ul tag contenteditable="true", the top list item can be deleted. How do I make it so that every new line is a list, and the top line li cannot be deleted. Thanks
Here's what I've got :
<ul style="height: 300px;" contenteditable="true">
<li>Type text here. Try deleting this list item.</li>
</ul>
The most trivial way of solving your problem would be insert an empty non-editable <span> into the first <li> element.
This is also not absolutely fool-proof, but will protect the first <li> element against most edit attempts.
<ul contenteditable="true">
<li><span contenteditable="false"></span>Type text here. Try deleting this list item.</li>
<li>editable!</li>
</ul>
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
Is there a way to easily have parallel html structures using jQuery? For example:
<li class="ul-1"> list 1 </li>
<li class="ul-2"> list 2 </li>
<li class="ul-3"> list 3 </li>
<div class="div-1"> div 1 </div>
<div class="div-2"> div 2 </div>
<div class="div-3"> div 3 </div>
Putting the div's inside the ul's isn't an option for me, they need to remain separate. I want to do something like $('.ul-2').show(), and also have it show $('.div-2). Is there a way to do this without getting a list of classes and parsing the class names?
As j08691 pointed out, I was able to use jQuery's index() function to relate two separate html structures to each other.
http://api.jquery.com/index/
I've got a code you see below:
<div class="categories-list">
Description One
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
What I want to do is to select the text "Description one" which has no tag around it and wrap it with the tag (specifically h2) using jQuery, so the final code would look like:
<div class="categories-list">
<h2>Description One</h2>
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
I know that I can use wrap() function to get the second thing done. The selecting part is the one I've got the problem with.
Simple wrap can't do the job until you walk over the contents of the element:
$(".categories-list").contents().first().wrap("<h2 />");
DEMO: http://jsfiddle.net/MDhvY/
I'm trying to make a Simple Nested List which will be some what similar to this Image.In the Image Main list is on Left and if there's any sublist it will appear on the right on mouse over.
the Link to what I'm trying looks like -sample at jsfiddle you can see Here the Problem I'm facing is
Q1 The Sublist is not easy navigable if you hover from list first to second and to third the whole list will disappear. behavior is not consistent may be because of design.
Q2. In My main page where I have to integrate it,
it keeps Pushing down all the element below it How can i handle it.
Q3. Right now the list is displayed like normal nested list, any help on making/showing side by side as in attached Image
for reference I'm putting the codes here too.
<ul id="ScatList" style="list-style: none inside;cursor: pointer;position: relative;margin: 0px;height:10px;">
<li><span><em>List</em></span>
<ul id="liststart" style="display: none;position:absolute;padding:2px 2px 10px 2px;top:20px;left:190px;text-align:justify" class="search-menu">
<li> <a>First</a>
<ul >
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li> Second
<ul >
<li><a>2.1</a></li>
<li>2.2</li>
</ul>
</li>
<li> Third
<ul >
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Javscript:
jQuery('#ScatList').hover(function() {
jQuery('#liststart').show(400);
}, function() {
jQuery('#liststart').hide();
});
jQuery('#liststart >li').hover(function() {
jQuery(this).find('ul').show(400);
}, function() {
jQuery(this).find('ul').hide();
});
jQuery('#liststart >li> ul').hide();
You might find my minimalistic navigation plugin useful for this. You're free to use the code and change it to your own liking.