I am using angularjs and embedded disqus to successfully. however, I want to display the comment count of each topic comments on the top page or index page where topics are listed. like this
index/top page is listed like this
<tr ng-repeat="news_item in main_index_news track by $index">
<td class="headline_link">
<a href="{{ decodeURL(news_item.url) }}"
ng-click="ga_event(news_item)">{{ news_item.title }}</a>
<table class="post_info">
<tbody>
<tr>
<td>created_at: {{ timeToLocal(news_item.time) | date:"yyyy-MM-dd hh:mm" }}</td>
<td>rate: {{ news_item.rate }}</td>
<td>
<a ng-href="/news/{{ news_item._id }}#disqus_thread"
title="{{ news_item.title }}">
discuss
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I have followed this tutorial, but I cant get it right.
I hope I am making a sense, because I am clueless, and its my first time to use disqus and I am really amazed by it.
Related
I have to modify the UI for a Leshan Client. Currently the way it is setup, it displays every instance of the client in the browser. How do i make it display only 10 clients, although I will be still creating hundreds of them? I tried to modify the code below for ng repeat and ng click but the only thing that changes is that I stop displaying any of the clients.
<tbody>
<tr ng-repeat="client in clients" ng-click="showClient(client)">
<td><a ng-href="#/clients/{{client.endpoint}}"> <strong>{{client.endpoint}}</strong></a> </td>
<td>{{client.registrationId}}</td>
<td>{{client.registrationDate | date:'medium'}}</td>
<td>{{client.lastUpdate | date:'medium'}}</td>
<td><i class="glyphicon glyphicon-info-sign" tooltip-html-unsafe="{{clientTooltip(client)}}"></i></td>
<td><span ng-class="{hidden: client.secure == false}" class="glyphicon glyphicon-lock" tooltip-html-unsafe="Communication over DTLS"></span></td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="client in clients | limitTo:10" ng-click="showClient(client)">
<td><a ng-href="#/clients/{{client.endpoint}}"> <strong>{{client.endpoint}}</strong></a> </td>
<td>{{client.registrationId}}</td>
<td>{{client.registrationDate | date:'medium'}}</td>
<td>{{client.lastUpdate | date:'medium'}}</td>
<td><i class="glyphicon glyphicon-info-sign" tooltip-html-unsafe="{{clientTooltip(client)}}"></i></td>
<td><span ng-class="{hidden: client.secure == false}" class="glyphicon glyphicon-lock" tooltip-html-unsafe="Communication over DTLS"></span></td>
</tr>
</tbody>
use ng-if
<div ng-repeat="i in values">
<div ng-if="i < 3">Hello</div>
</div>
working example
or use an auxiliar variable just to display the results you want
I've got a simple repeating table-row in AngularJS
<tr ng-repeat="item in items">
<td>{{ item.prop1 }}</td>
<td>{{ item.prop2 }}</td>
</tr>
My item object has a comment property on it, and if that comment contains a value, I want to display that in a row all by itself on the line right after the rest of the elements and have it span the entire row. Is that type of thing possible? I looked at ng-repeat-end but that doesn't seem to be what I want, and I can't just add and extra <tr> element inside the ng-repeat as that'd be invalid HTML.
You can use ng-repeat's special repeat start and end points via ng-repeat-start and ng-repeat-end.
DEMO
HTML
<table ng-controller="PostController">
<tr ng-repeat-start="post in posts">
<td>{{post.content}}</td>
</tr>
<tr ng-repeat-end ng-repeat="comment in post.comments">
<td>{{comment.content}}</td>
</tr>
</table>
UPDATE: If the comment is a string, then simply remove the ng-repeat at the ng-repeat-end end point and add an ng-if expression that validates the existence of post.comment.
DEMO
HTML
<table ng-controller="PostController">
<tr ng-repeat-start="post in posts">
<td>{{post.content}}</td>
</tr>
<tr ng-repeat-end ng-if="post.comment">
<td>{{post.comment}}</td>
</tr>
</table>
Is there anyway I can get ng-switch working inside a table? The table example is not working but the ul example just work fine. The problem is that I really need the table example. I am using angular 1.07.
<table>
<tbody ng-repeat="item in items">
<tr><td>{{ item.heading }}</td></tr>
<tr ng-repeat="row in item.fields" ng-switch on="row.nb">
<div ng-switch-when="01">
<td>{{ row.nb }}</td>
</div>
</tr>
</tbody>
</table>
<ul ng-repeat="item in items">
<li ng-repeat="row in item.fields" ng-switch on="row.nb">
<div ng-switch-when="01">
{{ row.nb }}
</div>
</li>
</ul>
You need to move the ng-switch-when to the td otherwise it will ignore it as invalid because a div is not valid markup inside a tr. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
Remove the div and change it to:
<td ng-switch-when="01">{{ row.nb }}</td>
Demo: http://plnkr.co/edit/yHkBGekjgGDts8pNtekJ?p=preview
Hi I have a simple use case for ng-repeat-start and end and is working just fine, the problem appears when I want to add an inner ng-repeat.
Here is the my code
<tr ng-repeat-start="obj in rows" >
<td ng-repeat="e in obj.row">{{e}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="4">{{obj.description}}</td>
<tr>
The inner ng-repeat into td element is not working, I'm seeing the ngRepeat comment when I inspect the html source code, but the td elements are not being created.
<!-- ngRepeat: e in obj.row -->
My ugly workaround (given that I know the size of that vector) is:
<tr ng-repeat-start="obj in rows" >
<td>{{obj.row[0]}}</td>
<td>{{obj.row[1]}}</td>
<td>{{obj.row[2]}}</td>
<td>{{obj.row[3]}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="4">{{obj.description}}</td>
<tr>
I am not sure whether you are using angular 1.1.6 or not since ng-repeat-start and ng-repeat-end are not available in 1.1.5 or 1.0.7 yet.
However, you don't actually have to use the new directives to achieve that. You can simply implement it like this for right now:
<table>
<tbody ng-repeat="obj in rows">
<tr ng-repeat="e in obj.row">
<td>{{e}}</td>
</tr>
<tr>
<td colspan="4">{{obj.description}}</td>
<tr>
</tbody>
</table>
You may use ng-repeat-start and ng-repeat-end to reimplement it when AngularJS 1.1.6 version is officially released.
Demo
I think it might be something wrong with your data structure. Using Angular 1.2.1 this works for me
<div ng-app="myApp" ng-controller="myCtrl">
<div class="h" ng-repeat-start="val in data">{{val.title}}</div>
<div ng-repeat="con in val.content">
{{con}}
</div>
<div class="b" ng-repeat-end>footer</div>
</div>
See jsFiddle
You should be able to use index-based iterations to bypass that:
<tr ng-repeat-start="obj in rows" >
<td ng-repeat="e in obj.row">{{obj.row[$index]}}</td>
</tr>
<tr ng-repeat-end>
<!-- ... -->
I've got tabular data loaded in AngularJS app. I want to display them in a table. But I also want to have detail view for some rows. Something like:
<table>
<tr ng-repeat="datum in data">
<!-- if datum.showDetail => detail view -->
<td colspan="N">
<h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1>
...
<p>{{ datum.fieldN }}</p>
</td>
<!-- else => row view -->
<td>{{ datum.field1 }}</td>
<td>{{ datum.field2 }}</td>
...
<td>{{ datum.fieldN }}</td>
</tr>
</table>
What's the Angular way of doing this?
Why not just adding ng-show and ng-hide directives to the td's?
<table>
<tr ng-repeat="datum in data" >
<!-- if datum.showDetail => detail view -->
<td colspan="N" ng-show="datum.showDetail">
<h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1>
...
<p>{{ datum.fieldN }}</p>
</td>
<!-- else => row view -->
<td ng-hide="datum.showDetail">{{ datum.field1 }}</td>
<td ng-hide="datum.showDetail">{{ datum.field2 }}</td>
...
<td ng-hide="datum.showDetail">{{ datum.fieldN }}</td>
</tr>
</table>
Also note that, in case you're using the Angular UI extensions, the ui-if directive would probably be a better fit, since it would actually remove the unused td's from the table, instead of just hiding them, like ng-hide.