I'm having a problem getting an ng-if to work. It works elsewhere within the same file, but not on the disclaimer line
<div id="wallet" class="row">
<div class="details">
<div class="row" ng-repeat="account in accounts">
<h3 ng-if="account.cardName == 'Cash'">Cash</h3>
<div class="metrics">
<div class="balance">
<h5>Current Balance</h5>
<a ng-if="!isImpersonator()" href="{{account.walletUrl}}" target="_blank">
<u ng-if="account.cardName == 'Cash'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
<span ng-if="!account.ABS_BALANCE">$0.00</span>
</u>
<u ng-if="account.cardName == 'Award Points'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | number}}</span>
<span ng-if="!account.ABS_BALANCE">0</span>
</u>
</a>
<a ng-if="isImpersonator()">
<u ng-if="account.cardName == 'Cash'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
<span ng-if="!account.ABS_BALANCE">$0.00</span>
</u>
</a>
</div>
</div>
</div>
</div>
</div>
<p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>
</div>
I only want the disclaimer line to appear if account.cardName is equal to 'Cash'. Why does the ng-if work above but not on the disclaimer line?
Thanks in advance...
This is because the disclaimer line is out of scope. The account doesn't exist at that point. You will have to move the disclaimer line inside the ng-repeat block, where account exists to make this work.
Your
<p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>
Is outside the div with the ng-repeat, then it´ll not be accesible. Try this way;
<div id="wallet" class="row">
<div class="details">
<div class="row" ng-repeat="account in accounts">
<h3 ng-if="account.cardName == 'Cash'">Cash</h3>
<div class="metrics">
<div class="balance">
<h5>Current Balance</h5>
<a ng-if="!isImpersonator()" href="{{account.walletUrl}}" target="_blank">
<u ng-if="account.cardName == 'Cash'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
<span ng-if="!account.ABS_BALANCE">$0.00</span>
</u>
<u ng-if="account.cardName == 'Award Points'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | number}}</span>
<span ng-if="!account.ABS_BALANCE">0</span>
</u>
</a>
<a ng-if="isImpersonator()">
<u ng-if="account.cardName == 'Cash'">
<span ng-if="account.ABS_BALANCE">{{account.ABS_BALANCE | currency}}</span>
<span ng-if="!account.ABS_BALANCE">$0.00</span>
</u>
</a>
</div>
</div>
</div>
<p class="disclaimer" ng-if="account.cardName == 'Cash'">Cash may be deposited to your card up to 48 hours.</p>
</div>
</div>
</div>
The scope issue was the problem, as pointed out above. Here's what we did to fix..
Added a new function:
$scope.accounts = accounts.data;
$scope.hasCashAccount = () =>
$scope.accounts.some(a => a.cardName === 'Cash');
Then changed the to:
[code]
<p class="disclaimer" ng-if="hasCashAccount()">Cash may be deposited to your card up to 48 hours.</p>
[/code]
Related
I have looked at almost every solution I could find about this but I can't get my code to work. I wan't to put a banner after 3 ng-repeats
<div class="row products-row" ng-init="onInit()">
<div class="col col-34 fashion-product-container" ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div>
</div>
use $index
like
<div id="banner" ng-show="$index == 3"></div>
Now this will show banner div when its the third element of ng-repeat.
Your <div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div> is outside of <div> containing ng-repeat tag. due to that $index is undefined.
Just put it inside the div of ng-repeat and it will work.
Try this:-
<div class="row products-row" ng-init="onInit()">
<div ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="col col-34 fashion-product-container">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-show="$index==3">Banner</div>
</div>
</div>
This is snippet code.
<div class="row col-xs-12">
<a *ngFor="let rec of recipe "href="#" class="list-group-item clearfix">
<div class="float-left">
<h4 class="list-group-item-heading">{{rec.name}}</h4>
<p class="list-group-item-text">{{rec.description}}</p>
</div>
<span class="float-right">
<img [src]="rec.imagePath" alt="{{rec.name}}" class="img-responsive" style="max-height: 50px;">
</span>
</a>
<app-recipe-item></app-recipe-item>
I wonder why float-right don't align image to right side. If i use insetead pull-right it's working.I have read that bootstrap 4 we should float rather than pull.
I deleted list-group-item, list-group-item-heading , list-group-item-text and it worked.
<a href="#" class="clearfix" *ngFor="let recipe of recipes">
<div class="float-left">
<h4>{{ recipe.name }}</h4>
<p>{{ recipe.description }}</p>
I solved this by removing the xs-12 specifier in the col class.
<div class="row">
<div class="col">
<a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
<div class="float-left">
<h4 class="list-group-item-heading">{{ recipe.name }}</h4>
<p class="list-group-item-text">{{ recipe.description }}</p>
</div>
<span class="float-right">
<img
[src]="recipe.imagePath"
alt="{{ recipe.name }}"
class="img-responsive"
style="max-height: 50px"
/>
</span>
</a>
<app-recipe-item></app-recipe-item>
</div>
</div>
I am currently working on a Chat application and there I want to show the count of new messages.
<div class="people" >
<div ng-repeat="user in allCompanyUsers">
<div class="person" ng-click="activateChat(user); bubble=true" id="chat_{{user.id}}">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble" class="noti_bubble">{{count}}</span></span>
<span class="preview"></span>
</div>
</div>
</div>
<div class="chat active-chat">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false">
<div class="bubble" ng-class="c.type">
{{c.message}}
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
Any kind of help will be appreciated and thanks in advance...
You can just use {{activeConversations.length}} in order to get the length/count as:
<div class="people" >
<div ng-repeat="user in allCompanyUsers">
<div class="person" ng-click="activateChat(user); bubble=true" id="chat_{{user.id}}">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble" class="noti_bubble">{{activeConversations.length}}</span></span>
<span class="preview"></span>
</div>
</div>
</div>
<div class="chat active-chat">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false">
<div class="bubble" ng-class="c.type">
{{c.message}}
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
I want to display only three items in my HTML page using angularJS.
My code:
<div class="col-xs-4" ng-repeat="idea in ideas | i in 2">
if(i !== 2){
<div class="tile p-5 m-b-10">
<button target="_blank" ng-click="showIdea(customer.Id,idea.Id)">
<img class="w-100" src="design/img/projects/1.png" alt="">
<small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
</button>
<div class="clearfix"></div>
</div>
}
</div>
Your code will not work because your if statement will not be evaluated.
You can use the limitTo filter.
<div class="col-xs-4" ng-repeat="idea in ideas | limitTo: 3">
<div class="tile p-5 m-b-10">
<button target="_blank" ng-click="showIdea(customer.Id,idea.Id)">
<img class="w-100" src="design/img/projects/1.png" alt="">
<small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
</button>
<div class="clearfix"></div>
</div>
Same as the other answer but you can use ng-if directive instead of an if statement this will remove elements from the DOM if the condition isn't true.
<div class="col-xs-4" ng-repeat="idea in ideas | limitTo:3">
<div class="tile p-5 m-b-10" ng-if="$index!==2">
<button target="_blank" ng-click="showIdea(customer.Id,idea.Id)">
<img class="w-100" src="design/img/projects/1.png" alt="">
<small class="t-overflow m-t-10">Medical-Pro Bootstrap </small>
</button>
<div class="clearfix"></div>
</div>
</div>
I would like to use Angular data-binding to dynamically change the date used for Livestamp.
For instance, I would like to make the following dynamic:
<span data-livestamp="1413704094"></span>
by using Angular databinding, something like:
<span data-livestamp="{{item.Date.toISOString}}"></span>
How do I do it? The above code doesn't work.
EDIT:
Here's how it's used:
<div class="panel panel-default messageItems" ng-repeat="item in vm.itemsTop | orderBy:'Id':true" ng-animate="'animate'">
<div class="panel-body">
<div class="media">
<a class="pull-left" href="/People/{{item.User.Username}}">
<img class="media-object"
src="http://mysite/{{item.User.Username}})/avatar"
alt="{{item.User.Username}}" />
</a>
<div class="media-body">
<h4 class="media-heading">
<span ng-bind="item.User.Username"></span>
</h4>
<h6>
posted <span data-livestamp="{{item.Posted.toISOString}}"></span> (<span ng-bind="item.Posted.toUTCString()"></span>)
</h6>
<p class="emojstext">
<span ng-bind="item.Text"></span>
</p>
</div>
</div>
</div>