I have a table that dynamically produces rows based on certain criteria. However, I want the rows to be limited to just 5 rows maximum. If there are more than 5 rows, I want a link to appear at the bottom of the table that says "More Articles". If there are 5 rows or less, I don't want the "More Articles" link to be visible. I'm pretty sure I have to use a ng-if here, but not sure how to construct it. Any suggestions?
<table class="table table-sm table-responsive">
<thead>
<tr>
<th class="wrap-header"><big class="big-text">My Benefits Articles</big></th>
</tr>
</thead>
<tbody ng-repeat="item in data.list track by $index | limitTo: 5">
<tr>
<td><a ng-href="{{item.url}}" target="_blank"> <img class = "icon" src="{{item.icon}}" height="30" width="30"> {{ item.short_desc }}</a></td>
</tr>
</tbody>
</table>
<div ng-if="/* What goes here? */">
<a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
</div>
<div ng-if="data.list.length > 5">
<a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
</div>
You can also use an ng-show which shows something meeting a certain criteria.
This is better practice than using ng-if for showing content.
<div ng-show="data.list.length > 5">
<a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
</div>
Here is documentation for both:
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngIf
Hope this helps!
Firstly, i would use a variable to determine how many posts are shown. This can be achieved by changing limitTo: 5 to limitTo: shownPosts (remember to declare it and set to 5 in your scope aswell)
Then, you'd want to check if you got more posts than are visible.
<div ng-if="data.list.length > shownPosts">
Side note: You want to increment the shownPosts variable by 5 every time you click the button.
Related
I have this markup:
<div class="row" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">
<div class="col-lg-12">
<div ng-repeat="controlgroup in value2.ControlGroup"
ng-show="controlgroup.ListOfControls.length > 0">
<table ng-if="controlgroup.ListOfControls.length > 0">
<tbody>
<tr ng-repeat="value in controlgroup.ListOfControls = (controlgroup.ListOfControls | filter: searchCompanyControl )">
</tr>
</tbody>
</table>
</div>
</div>
</div>
What I'm trying to do is hide the first div which has the ng-repeat for requirements if all control groups are hidden based on
controlgroup.ListOfControls.length > 0
I'm able to hide the second div ng-repeat but I'm not sure how to hide the most outer ng-repeat if all the control groups in the requirement are hidden based on the condition that there are no list of controls.
You could use "ng-if" on the top div.
<div class="row" ng-if="controlgroup.ListOfControls.length > 0" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">
I am not sure if this would cancel your ng-repeat or not, but if it does, you could wrap it in its own div.
eg.
<div ng-if="controlgroup.ListOfControls.length > 0">
<div class="row" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">
Please let me know if this helps!
I am trying to display an icon in a table according to data from a database. I have a function that calls a query and returns a boolean if that data exists, if it does exist I would like to display an icon on a table. The problem I'm running into is that when I call that function, the function is executed infinite times and I'm not really sure why this is happening. Any help would be highly appreciated!
This is the table that will be displaying the icon:
<table class="table table striped">
<thead>
<tr>
<th> ... </th>
<th> Exists? </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in myList">
<td> ... </td>
<td>
<i ng-show="callFunctionThatReturnsBoolean(item)" class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
</i>
</td>
</tr>
</tbody>
</table>
You can use ng-show. When the ng-show condition satisfies based on the data then show the icon else don't.
I have written small piece of code based on your requirement.
In view,
<td>
<span ng-show='item.flag'><i class="glyphicon glyphicon-user"></i></span>
{{item.flag}}
</td>
Update:
Updated plunker to use method for ng-show.
Working Plunker
The problem is that ng-show should not be bound to a function call as it calls your function in every digest cycle: https://stackoverflow.com/a/20915253/2419215.
But I guess the best approach would be to send back the model from the backend in its final version and don't make queries like this for certain list elements.
I'm new to angular js & working on it ,to develop a shopping cart(E-com) Website.I'm having a little problem with my code.I have to increment a variable in a for loop in a view page, even i have to write an if clause to display the button, is it possible to write a for loop & if clause in a view file? Please suggest some better tutorials to learn the Angularjs thoroughly.
Here is my code
<table class="table table-bordered">
<tr class="well">
<td class="tdRight" colspan="4" >
<a href="index.htm#/store" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
<i class="icon-shopping-cart" />
<b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
</a>
</td>
</tr>
<tr ng-repeat="product in store.products | orderBy:'name' | filter:search" >
<td class="tdCenter"><img ng-src="img/products/{{product.sku}}.jpg" alt="{{product.name}}" /></td>
<td>
<b>{{product.name}}</b><br />
{{product.description}}
</td>
<td class="tdRight">
{{product.price | currency}}
</td>
<td class="tdCenter">
<button class="btn btn-success" type="button" ng-hide="cart.getTotalCount() > 0" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">+</button>
<span ng-int="counter=0;"></span>
<span ng-repeat="item in cart.items">
<span>{{ counter}}</span> // I want to increment the counter here, if counter will increment to 1 then have to display the button
<div>
<span ng-if="item.name!=product.name">
<button class="btn btn-success" type="button" ng-show="item.name!=product.name" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">+</button>
</span>
</div>
<div ng-show="item.name==product.name">
<button class="btn btn-success" type="button" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">+</button>
<input class="span3 text-center" ng-change="cart.addItem(product.sku, product.name, product.price, this.value)" type='tel' ng-show="item.name==product.name" ng-model='item.quantity'>
<button class="btn btn-incerse" type="button" ng-click="cart.addItem(product.sku, product.name, product.price, -1)">-</button>
</div>
</span>
</td>
</tr>
<tr class="well">
<td class="tdRight" colspan="4">
<a href="index.htm#/store" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
<i class="icon-shopping-cart" />
<b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
</a>
</td>
</tr>
</table>
It's bad practice to code JS directly in HTML.
Make another file for your script and include it to your HTML by puting this in the HTML-head:
<script src="filename.js" type="text/javascript" ></script>
For me it seems, as you're misinterpreting HTML as a procedural script, it's not. You don't want to increment at the procedural stage where the is processed, due this never happens (HTML isnt a programming language).
Better think of HTML as a stencile that defines what kind of elements the page has, as well as their attributes. But HTML doesn't process anything.
But due you, and any other webdev, want to write stuff conditional, an HTML element can trigger functions and handover attributes (like a click).
So now you have to figure out, when exactly you need the increment.
Due it depends on the number of products in the card (if I got that right?) your incremental function has to be called whenever the number of products change, or whatever event you want to trigger the increment.
I'm not firm with angular syntax, so I'm using jQuery and comments:
// set the value of element with id "element_id" to ct
// this function directly alters the elements value, and returns true or
// false, depending if the change has taken place.
function set_count( ct ){
return $("#element_id").val( ct );
};
function count(){
var ct;
for ( whatever ) {
ct++;
};
return ct;
}
// Now the trigger
<element onclick='set_count( count() )'>
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.
I have the following code to display 3 different types on the page:
Production
Development
Maintenance
And I want the entire section (Production h4 and table/tbody) to disappear if there is no content in filteredResults. (Only appear if there is content)
<span ng-repeat="type in types">
<table class="max-width">
<tbody>
<div class="row" ng-repeat="result in filteredResults = (results | filter:search) | filter: status('status', type)">
<div class="left-header-padding" ng-if="$index==0">
<tr class="pull-left">
<h4 class="title">{{type.charAt(0).toUpperCase() + type.substring(1)}}</h4>
</tr>
</div>
</div>
</tbody>
</table>
</span>
I am currently trying ng-if for content inside the table, checking if ng-repeat occurs and only rendering the if there is content in ng-repeat, but I want the entire section (table included) to disappear when there is no content. Does anyone know how to accomplish this?
if you want hide table put ng-show into table tag ie:
<table class="max-width" ng-show="filteredResults.length >0">
<tbody>
<div class="row" ng-repeat="result in filteredResults = (results | filter:search) | filter: status('status', type)">
<div class="left-header-padding">
<tr class="pull-left">
<h4 class="title">{{type}}</h4>
</tr>
</div>
</div>
</tbody>
add ng-show="filteredResults.length" to your table element
<table ... ng-show="filteredResults.length">
example: http://plnkr.co/edit/WFQzRtXFe3UnvuzA8psa?p=preview
also, iv'e used tr inside tbody instead of div
Try using ng-init to create a local filtered collection and use the ng-if statement to hide the table if there is no items in the filtered collection.
<div ng-repeat="type in types">
<div ng-init="filteredResults = (results | filter:search) | filter: status('status', type)">
<table class="max-width" ng-if="filteredResults.lenght > 0">
<tbody>
<div class="row" ng-repeat="result in >
<div class="left-header-padding" ng-if="$index==0">
<tr class="pull-left">
<h4 class="title">{{type.charAt(0).toUpperCase() + type.substring(1)}}</h4>
</tr>
</div>
</div>
</tbody>
</table>
</div>
</div>
Let me know if you have any questions.