I am using ng-repeat to show list items with some text. And I want every single item to be indented 10-20px to the right from the previous one. I don't have much experience with css.
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}">
{{todo.toDoText}}
</li>
Here is a jsFiddle with my code.
Thanks in advance!
you may use ng-style to solve your problem:
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}"
ng-style="{'margin-left': 10*$index+'px'}">
{{todo.toDoText}}
</li>
$index is a varibale that will be set by ng-repeat. You may use this to calculate your style.
Change your template with following::
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}" style="text-indent: {{$index * 10}}px">
{{todo.toDoText}}
</li>
</ul>
</div>
Related
Using Meteor 1.2.02
I create a list with a helper:
<ul>
{{#each movie}}
<li id="{{_id}}">{{name}}</li>
{{/each}}
</ul>
The result:
<li id="1">Interstellar</i>
<li id="2">The Martian</i>
Then I hide Interstellar:
$("#1").hide();
Result:
<li id="1" style="display:none">Interstellar</li>
<li id="2">The Martian</li>
Then I remove Interstellar from the collection Movies.remove({name: "Interstellar"}) and this is what I end up with after Blaze reactively updates the DOM:
<li id="2" style="display:none">The Martian</li>
Does anyone know why now "The Martian" is inside the list element with display:none that belonged to Interstellar? I thought Blaze would have removed that first <li> elements and all its attributes. Thank you.
Let's say I created a menu titled "Main Menu" from the admin panel and I need to customize the default markup, e.g. let's say I want to modify/replace the <ul>, <li> as well as the surrounding <article> and <nav> tags.
I assume that I have to come up with something like this in my Parts.MenuWidget.cshtml alternate template.
<ul class="a b c">
for each item in menuItems:
display("<li>" + item + "</li>")
end
</ul>
How do I do that in Orchard?
That's quite simple.
You could first create an alternate for you MenuWidget like so:
Parts.MenuWidget-MyZoneName.cshtml
<nav>
<div class="logo">
#Html.Partial("_Logo")
</div>
<ul>
#*Display all the stuff added in the admin*#
#DisplayChildren(Model.Menu)
#*Add additional stuff. Of course you could also add it as MenuItem to the Menu-Model*#
#if ( Request.IsAuthenticated )
{
if ( Authorizer.Authorize(StandardPermissions.AccessAdminPanel) )
{
<li>
<a href="/Admin">
Admin
</a>
</li>
}
<li>
<a href="~/Example1">
Extra1
</a>
</li>
}
else
{
<li>
<a href="~/Example2">
Extra2
</a>
</li>
}
</ul>
</nav>
And then go on and do something similar for your MenuItems. For example:
MenuItemLink.cshtml
#Model.Text
Another thing that's worth mentioning is that you can either only provide an alternate for a specific shape like the MenuItemLink above or just provide an alternate for the base MenuItem shape which will then be used for every MenuItem type that exists.
(Maybe those are not the best examples, but I guess they'll do the job ;) )
Update:
In order to remove/modify the tags you can create an alternate for MenuItem.cshtml and look at this part:
if (HasText(renderedMenuItemLink))
{
var tag = Tag(Model, "li");
#tag.StartElement
#renderedMenuItemLink
if (items.Any())
{
<ul>
#DisplayChildren(Model)
</ul>
}
#tag.EndElement
}
I have 2 ul elements in my document. How can I find the first of the 2 using PrototypeJS? I tried this code:
first = $$('ul[class="level0"]')[0];
second = $$('ul[class="level0"]')[1];
Only first is filled, the second is empty. Any ideas? This is my html:
<ul id="nav">
<li class="level0 nav-1 first level-top parent">
<ul class="level0">...</ul>
</li>
<li class="level0 nav-2 last level-top parent">
<ul class="level0">...</ul>
</li>
</ul>
Thanks :)
Instead of using the attribute CSS selector use the class CSS selector
first = $$('ul.level0')[0];
second = $$('ul.level0')[1];
but otherwise that should work
there are other methods as well $$() returns an array of elements (even if is one) and you can refer to the .first()
first = $$('ul.level0').first()
Please let us know if fixing the HTML worked or if you are getting any errors in your javascript console - that could lead you to a different problem
Use
first
$('nav').down('.level0');
second
$('nav').down('.level0', 1);
Cheers
Is it possible to have Wordpress generate this type of unordered list?
<ul id="nav1">
<li>item1</li>
<li>item2
<ul id="nav2">
<li>subitem1</li>
</ul></li>
<li>item3</li>
</ul>
Obviously I can do the following:
<ul id="nav1">
<?php wp_list_pages(); ?>
</ul>
But my question is, how do I make it so that I can have a secondary ul under a page (or list item such as 'item2' above)?
Basically, I'm looking for a way for Wordpress to dynamically generate the following:
<li>item2
<ul>
<li>subitem1</li>
</ul></li>
And I can use JQuery if necessary to give the secondary (sub menu) unordered list an id of #nav2...
Anyway, is this possible?
Thanks and I appreciate all of your help!
Amit
Nevermind guys.
I just tried it with the wp_list_page(); function and it works. It does exactly as I wanted it to with exception to one thing...
It put's an extra <ul> in there so the list looks something like this:
<ul id="nav1">
Pages
<ul>
<li>item1
<ul class="children">
<li>sub-item1</li>
</ul></li>
</ul>
</ul>
Anyone know how to get rid of the <ul> following the Pages title, as well as NOT show the word Pages?
Thanks, Amit
Okay, I solved the added ul program.
This is what I have as the result:
<ul id="nav1"><?php
$pageargs = array(
'link_after' => ' /',
'title_li' => __('')
);
wp_list_pages($pageargs); ?></ul>
Hope someone benefits from it :)
Amit
I have ASP.Net code similar to the following (this is inside a FIELDSET):
<ol>
<li>
<label>Some label</label>
<one or more form controls, ASP.Net controls, labels, etc.>
</li>
<li>
<label>Another label</label>
<... more of the same...>
</li>
...
</ol>
I'm trying to keep my markup as clean as I possibly can, but I've decided that for various reasons, I need to wrap a DIV around everything in the list item after the first label, like this:
<ol>
<li>
<label>Some label</label>
<div class="GroupThese">
<one or more form controls, ASP.Net controls, labels, etc.>
</div>
</li>
<li>
<label>Another label</label>
<div class="GroupThese">
<... more of the same...>
</div>
</li>
...
</ol>
I would rather do this with "unobtrusive Javascript" via jQuery instead of littering my page with extra markup so I can keep the form semantically "clean".
I know how to write a jQuery selector to get to the first label in each list item $("li+label") or use :first-child. I also know how to insert things after the selection.
What I can't figure out (at least this late at night) is how to find everything after the first label in the list item (or basically everything in the list item except for the first label would be another way to put it) and wrap a DIV around that in the document ready function.
UPDATE:
Owen's code worked once I removed the single quotes from around: $('this') and set the proper decendent selector: $("li label:first-child") in order to only select the first label that occurs after a list item.
Here is what I did:
$(document).ready(function() {
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="GroupThese"></div>');
});
});
edit: corrected code (see old code in revision history and comments for more info)
ok this should work:
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});
from:
<li>
<label>Some label</label>
<div>stuff</div>
<div>other stuff</div>
</li>
<li>
<label>Another label</label>
<div>stuff3</div>
</li>
produces:
<li>
<label>Some label</label>
<div class="li-non-label-child-wrapper">
<div>stuff</div>
<div>other stuff</div>
</div>
</li>
<li>
<label>Another label</label>
<div class="li-non-label-child-wrapper">
<div>stuff3</div>
</div>
</li>
One approach would be to just wrap everything inside the <li> and then move the label out, e.g.
var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());