I have these two template which is for tree view, I want to use the first approach but it seems that there is a problem or I've missed something.
First Approach (desirable but does not work) TreeTemplate.html
<ul>
<li ng-repeat="node in c.model" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'">
{{node.text}} <!--It wont show up , the problem is here, any tags will not show up in result-->
</li>
</ul>
NodeTemplate.html
<ul ng-if="node.nodes">
<li ng-repeat="node in node.nodes" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'">
{{node.text}}
</li>
every thing in <li></li> in TreeTemplate.html wont show up thought to ng-include
Second Approch (not desirable but works)
TreeTemplate.html
<ul>
<li ng-repeat="node in c.model" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'">
<!--there is not any tag here!-->
</li>
NodeTemplate.html
{{node.text}}
<ul ng-if="node.nodes">
<li ng-repeat="node in node.nodes" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'">
{{node.text}}
</li>
</ul>
please help me figure out what is happening.
The ng-include attribute is replacing everything inside the li with the content from NodeTemplate. This is why your {{node.text}} isn't showing up.
Your second approach is almost ideal, I don't get why you don't like it. From what I get, the NodeTemplate should be a single node inside your tree, which means it should be responsible for rendering the node text as well.
I would just remove {{node.text}} inside the li there, since it'll be replaced by the ng-include:
{{node.text}}
<ul ng-if="node.nodes">
<li ng-repeat="node in node.nodes" style="list-style-type: none;" ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'" />
</ul>
Related
I've been searching a lot for this, without any solution so far. As you might also have seen the topic title might be a little hard to interpret and that's because I'm not quite sure how to explain it shortly.
The problem
Looking at the HTML below, I know the class of the last element called "active" and this element is chosen dynamically in jQuery, based on which site the visitor is on currently - i.e. different elements has this class depending on the site. On another site the li with class first-sub-li could have the class active (or for that matter the li with class first). This class is, as said, added dynamically based on the site with jquery. From here on I wish to identify the parent of the element with active which is a direct descendent of top-parent and add a class called active-parent to this. I.e. in the case below i wish to add the active-parent class to the li with class second.
EDIT: Please note that the "depth" of the list can vary, therefore also requiring a "dynamic" approach to picking out the parent. I completely forgot this in the initial writing.
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li> <!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
So far I've tried the following jQuery without succes as it doesn't identify it.
EDIT 2: This actually does work, but initially it didn't as it apparently was called before the class was loaded, despite appearing later in the javascript document. Wrapping it in a $(window).on("load", function() solves the problem as shown below.
$(window).on("load", function() {
$(".active").closest("#top-parent > li").addClass("active-parent");
});
The original code was just $(".active").closest("#top-parent > li").addClass("active-parent");
You can start traversing up with .parent(), it will excluding the self li.
$(".active").parent().closest("li").addClass("active-parent");
You can use :has() selector
$('#top-parent > li:has(.active)').addClass("active-parent");
$('#top-parent > li:has(.active)').addClass("active-parent");
.active-parent {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li>
<!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
I think this is what you're looking for. Find all li which are direct descendants of topmost-parent and filter that for the one which has a child .active. Apply the class.
$('#top-parent > li').filter(function(e){
return $(this).find('.active').length>0;
}).addClass("active-parent");
.active-parent{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li">1.1</li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li active">2.1</li> <!-- Here -->
</ul>
</li>
</ul>
This is my html code
<ul class="steps-indicator">
<li ng-repeat="step in steps">
<a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
</li>
</ul>
And this is my css :
.steps-indicator li a:before{
content:url('/img/wizard-arrow.png') no-repeat;
}
The thing i am trying to achieve here is to show different images in front of different anchor elements.
I am using the angular-wizard in ionic for mobile, and customizing the look and feel of the progress bar element. Here is the link http://mgonto.github.io/angular-wizard/
Any help would be appreciated!!
UPDATE:
I think i missread your question. Is that what you need?
Put all the images inside the "step.images" and display this all doing an ng-repeat again.
<ul class="steps-indicator">
<li ng-repeat="step in steps">
<img ng-src="{{img}}" ng-repeat="img in step.images" />
<a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
</li>
</ul>
If you only have 1 image per "step" you don't need to use ng-repeat anymore for the image.
<ul class="steps-indicator">
<li ng-repeat="step in steps">
<img ng-src="{{step.image}}" />
<a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
</li>
</ul>
Then just modify your css to show it as you like.
Is that what you need?
When I use the angular ng-repeat directive with an <li> element, I get an extra line after each <li>. Simple example with pictures below.
Simple example using angular ng-repeat directive:
<ul class="list-group" ng-repeat = "num in [0,1,2,3,4]">
<li class="list-group-item list-group-item-success">{{num}}</li>
</ul>
Will create something like :
However doing it without angular ng-repeat such as
<ul class="list-group">
<li class="list-group-item list-group-item-success">1</li>
<li class="list-group-item list-group-item-success">2</li>
<li class="list-group-item list-group-item-success">3</li>
<li class="list-group-item list-group-item-success">4A</li>
</ul>
results in
As you can tell, when I use the ng-repeat directive, I get an extra line below each repeated element. Is there a subtlety that I am missing or does anyone know how to remove the extra line?
You're repeating your <ul> element in your current markup. The visual difference is because you are essentially rendering something like this...
<ul>
<li>0</li>
</ul>
<ul>
<li>1</li>
</ul>
<ul>
<li>2</li>
</ul>
...
Instead, change to the following and ng-repeat your <li>
<ul class="list-group" >
<li ng-repeat="num in [0,1,2,3,4]" class="list-group-item list-group-item-success">{{num}}</li>
</ul>
I want to Highlight the Menu Dynamically in Html Pages using Js.
For Example
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES
<ul>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</div>
I given Like this. But its not working
<script>
$(document).ready(function() {
$("#cssmenu ul li").click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
});
For this i would like activate the Menu when it is Clicked Using Js. Please Help me.
Thanks in Advance.
I have a demo for you here: http://jsfiddle.net/ttaN2/4/
I have altered the HTML so that there are correct open and close tags:
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES</li>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</ul>
</div>
I believe this is what you intended. I am not sure what you intended to happen when you click on another sub menu though. I'll try to help you out if you can describe exactly what you intend to happen.
i am trying to generate a blog list but i got a problem with ng-repeat. my list looks like this
<ul>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<span class="sep2"></sep>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<span class="sep2"></sep>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
</ul>
So after every 2 list items, i have a span that levels my next 2 boxes.
Right now i have this angular code.
<ul>
<li ng-repeat="post in postsJSON">
<h2>{{post.title}}</h2>
<p>{{post.message}}</p>
</li>
</ul>
And i dont know how to generate that span after every second list item.
Thank you in advance, Daniel!
With angular v1.2 it becomes quite easy, using ng-repeat-start, ng-repeat-end and ng-if, you can check it here : http://jsfiddle.net/DotDotDot/XNJvj/1/
Your code will look like this:
<ul>
<li ng-repeat-start='post in postsJSON'>
{{post.item}}<br/>
{{post.message}}
</li>
<span ng-if="$odd && !$first" ng-repeat-end>
<span class="sep2">_____</span>
</span>
</ul>
ng-repeat-start/end allows you to enter a loop in a tag and close it in another, in this case, I also added a condition using the $odd parameter of the ng-repeat, showing only every other span
The issue here is not really with angular but more with the structure of your markup. ul tag should normally only contains li tags as children.
To resolve your issue I will stick to the ng-repeat you already have and create the separator with css. Something like that :
<ul class="blog list">
<li ng-repeat="post in postsJSON" class="blog entry">
<h2>{{post.title}}</h2>
<p>{{post.message}}</p>
</li>
</ul>
CSS :
.blog.entry {
border-bottom : 1px solid black // or whatever color
...
}
or if you need more control on the separator use css :after and do something like
.blog.entry:after {
content : "";
...
}
If you are not familiar with :after you can have a look there