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>
Related
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>
I have a loop like this in revets.js:
<ul>
<li rv-each-article="main_content.latest_articles">
<p rv-on-click="controller.onArticleClick" rv-text="article.title"
data-url="article.url"></p>
</li>
</ul>
Unfortunately article.url is not being parsed by revets.js so the when logging the value to the console it just prints article.url while I expect it to get the actual value from the data object and print that out.
How do I fix this?
Just prefix data-url with rv- like:
<ul>
<li rv-each-article="main_content.latest_articles">
<p rv-on-click="controller.onArticleClick" rv-text="article.title"
rv-data-url="article.url"></p>
</li>
</ul>
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>
I have a tree structure in HTML like the below:
<ul id="org" style="display:none">
<li>
Food
<ul>
<li>Beer</li>
<li>Vegetables
<ul>
<li>Pumpkin</li>
<li>Aubergine</li>
</ul>
</li>
<li>Bread</li>
<li>Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>
I am using jOrgChart from GitHub and you may see a demo here.
I want to store this tree structure into my database and I have a table like below:
id | name | parent_id
However I just can't find a way to do that. Any one could help on that?
Thanks so much in advance.
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/