ng-repeat li have extra line after each repetition - javascript

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>

Related

Insert markup before and after elements from NodeList

I got the following mark up:
<ul class="category-top-navigation__group--level-2">
<li class="category-top-navigation__item--column-1">
<li class="category-top-navigation__item--column-1">
<li class="category-top-navigation__item--column-2">
<li class="category-top-navigation__item--column-2">
</ul>
By using the following JavaScript selector:
document.querySelectorAll('.category-top-navigation__group--level-2 .category-top-navigation__item--column-1');
I can select a NodeList of all the column-1 or column-2 elements. Now what I wanna do is wrap the elements with column-1 and column-2 with a new element, perhaps a span so that the new markup would look like this.
<ul class="category-top-navigation__group--level-2">
<span class="new-element-1">
<li class="category-top-navigation__item--column-1">
<li class="category-top-navigation__item--column-1">
</span>
<span class="new-element-2">
<li class="category-top-navigation__item--column-2">
<li class="category-top-navigation__item--column-2">
</span>
</ul>
I was thinking to use insertAdjacentHTML afterend and beforebegin, however I am not quite sure how to get this working, or if that is the best approach to the task.

in angularjs how do i get $index for each LI within different div

here is my code snippet.
<div>nike</div>
<ul>
<li id="cat-{{$index}}">csj</li>
<li id="cat-{{$index}}">appliance</li>
</ul>
<div>hulk</div>
<ul>
<li id="cat-{{$index}}">toys</li>
<li id="cat-{{$index}}">t-shirt</li>
</ul>
If i have to put angular snippet it would look like
<ul>
<li ng-repeat="name in category" id="cat-{{$index}}"></li>
</ul> //output : csj, appliances
<ul>
<li ng-repeat="desc in data" id="cat-{{$index}}"></li> //output: toys, t-shirt
</ul>
When I am trying to access "toys" by saying cat-2. It is returning me an error. When I inspected in chrome. it is giving ids as
csj - cat-0
appliances - cat-1
toys - cat-0
t-shirt - cat-1
I want it to be in ascending order meaning toys should have id cat-2 and t-shirt should have id cat-3.
Any help would be great. Is it even possible?
$index is part of the ng-repeat scope. If you do a ng-repeat you could use it like this:
<ul>
<li ng-repeat="myLi in myArray" id="cat-{{$index}}"></li>
</ul>

html parent content wont show up though to ngInclude anglurjs

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>

Add html in *ng-for loop in angular 2

I want to add html code from a variable inside a for loop in angular 2:
<ul>
<li *ng-for="#c of myHtmlItems">
{{c.myHtml}}
</li>
</ul>
The html is only added as a string
Update to angular2.0.0
<ul>
<li *ngFor="let c of myHtmlItems" [innerHTML]='c.myHtml'></li>
</ul>
*ng-for has been replaced with *ngFor
# has been replaced with let
inner-html with innerHTML
(better to use property binding like this [innerHTML]='c.myHtml' instead of inner-html="{{c.myHtml}})
you could do:
<ul>
<li *ng-for="#c of myHtmlItems" inner-html="{{c.myHtml}}></li>
</ul>
instead of ng-for, give a try with ng-repeat. As mostly ng-repeat is useful in very different ways
<ul>
<li ng-repeat="element in myHtmlItems">
{{element}}
</li>
</ul>

Simplifying click and toggle function with jquery

I need some help making jQuery click and toggle function being simplified.
JS FIDDLE
This is what I have:
HTML
<div class="category-list-content">
<h4><strong>Category</strong></h4>
<ul class="category-list">
<li class="">
Company
</li>
<li class="">
Industry
</li>
<li class="">
Job Title
</li>
<li class="">
Tenure
</li>
<li class="">
Seniority Level
</li>
</ul>
</div>
ABOVE are my main category list
<div class="category-list-sub-content">
<h4><strong>Sub Category</strong></h4>
<ul class="segmentation-list ">
<p>Company</p>
<li class="">9lenses</li>
</ul>
<ul class="category-list ">
<p>Industry</p>
<li class="">Avation</li>
<li class="">Software</li>
<li class="">Mobile</li>
<li class="">Cars</li>
</ul>
<ul class="category-list">
<p>Job Title</p>
<li class="">UI Developer</li>
<li class="">UX Developer</li>
<li class="">Designers</li>
<li class="">Web Developers</li>
</ul>
<ul class="category-list">
<p>Tenure</p>
<li class=""> 5 years</li>
<li class="">< 5 years</li>
<li class="">> 5 years</li>
<li class="">10 years</li>
<li class="">1 year</li>
</ul>
<ul class="category-list ">
<p>Seniority Level</p>
<li class="">Team Lead</li>
<li class="">Juniour Employee</li>
<li class="">Intern</li>
<li class="">Director</li>
<li class="">CEO</li>
</ul>
</div>
This are sub-category list.
I was wanting to make something like when I click on the Company Sub category of Company will show and other sub-categories remain hidden. and when I click on the Industry , Industry subcategory will show and other will be hidden. Same goes for every category. Something like tab effect. I can do this by adding classes on each categories and sub-categories and giving .show() and .hide() functions. but it will huge to add unique classes. Also I may add more categories and sub categories later. So is there any good way to make this work how I describe ? If you need to alter(add any class or ID) anything to make this work that will be fine.
Any help will be appreciated. I am really suffering with this.
What you can do is setting a #hash in every tag of you category menu like:
<li class="">
Company
</li>
Set the id corresponding on in your "main category list" like :
<ul class="segmentation-list " id="company">
<p>Company</p>
Then set an event on each tag, detect the #hash and show only the right div. A little research on something called the web could have helped you. I'm not gonna give you the complete code, try doing it yourself if you don't want other downvoting your question.

Categories

Resources