Add html in *ng-for loop in angular 2 - javascript

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>

Related

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>

ng-repeat li have extra line after each repetition

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>

Angularjs json ng-repeat displays items properties only with manual iterator

Im getting json from some web service and displaying it with ng-repeat but i can't seem to display item properties.
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item}}</p>
</li>
</ul>
This works and will display all json
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item.name}}</p>
</li>
</ul>
This doesnt work.
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item[0].name}}</p>
</li>
</ul>
This works but will only display 1 item.
I just started working with angular and i feel im missing something becouse of it, if needed ill try to post a jfiddle of a sample.
UPDATE
im tring to get twitch.tv stream info
https://github.com/justintv/Twitch-API/blob/master/v2_resources/streams.md#get-streams
raw json from 2 streams, what i get from the first example
http://pastebin.com/bQLqu9BR
UPDATE 2
my code
http://plnkr.co/edit/3eOZ598zt2hkrJcsOLhP
Hmmm... I seem to be able to work with the sample data you provided.
See the following:
http://plnkr.co/edit/M3TQ4qI1DJPtgv6jCQLy?p=preview
Snippet:
<ul>
<li ng-repeat="item in srcData">
<p ng-bind="item.game"></p>
<p ng-bind="item.channel.display_name"></p>
<p ng-bind="item.channel.url"></p>
</li>
</ul>
You don't need to include an index for each item to display its properties, every item knows its index number and you can access it using the $index variable.
Check this out:
http://plnkr.co/edit/ECyyFYVupVG7mKqwsGaB
<ul>
<li ng-repeat="item in itemList">
{{$index}}
<p>
Game: {{item.game}}
</p>
<p>
Channel Name: {{item.channel.name}}
</p>
</li>
</ul>

Create a URL based on Selection in <ul> <li>

I am trying to build url based on a user selection from a multilevel list.
The user selects four options which in turn will create the url required for retrieval of a document.
Example:
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
So I would select the Report Name > Year > Month and this would build a url which equals the path to the file.
e.g. http://www.example.com/Report1/2010/Jan
Does anyone perhaps have any ideas as to how this can be done.
Here is an example of $(this) being used to get the value of what was clicked. I'm using JQuery in this example.
Had to add an id to the year value. You don't HAVE to do it this way, you can use the jquery selectors to get the proper value. It is just a lot easier.
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li id='2010'>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
The javascript looks like this:
$('#2010 li').click(function()
{
var year=$(this).parent().parent().attr('id');
var month=$(this).text();
console.log(month+' '+year);
//this will show you Jan and 2010 in the log. You can use this variable to append to a URL string.
});
Ok there are several options, I would suggest using javascript.
So, basically, you would check if an <li> was clicked and if it was, then add a certain value to string, the redirect the page using that built string. Here is an example of what I mean:
http://jsfiddle.net/35XDn/4/

ng-repeat without an html element

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

Categories

Resources