what I want is the "seen" only shows one time if match the if condition.
<span class="seen" ng-if="!isDone">
<i ng-init="isDone=true" class="icon icon-ok border0 font12 green"></i> seen
</span>
<b>{{msg.username}} :</b>
<span ng-bind="msg.message"></span>
</td>
https://jsfiddle.net/3n6x08aj/2/
Try using track by $index in ng-repeat and for first node you can check the condition $index === 0
Working fiddle https://jsfiddle.net/3fmjzcb1/
Related
I'm trying to get an html <br> tag after a determined amount of elements with ng-repeat. As an example every 5th button gets a <br> appended to it. I tried multiple approaches but can't seem to get it right. I'd appreciate if anyone can give me some pointers on how to achieve this. Thanks in advance.
<button type="button" class="btn btn-default btn-small" ng-repeat="item in items"
{{item}}
</button>
You can check for every fifth element using $index of ng-repeat, after that you can use ng-show directive to show <br /> accordingly
<br ng-show="($index + 1) % 5 == 0" />
I assume this is supposed to be a row of buttons before each <br>? Easiest way to do this is to create a button container to repeat on, and making use of the ngIf directive alongside the $index property of ngRepeat to determine if the <br> should exist:
<span ng-repeat="item in items">
<button type="button" class="btn btn-default btn-small">{{ item }}</button>
<br ng-if="$index && $index % 4 == 0">
</span>
The first $index inside the ngIf will evaluate to false on the first index (as it's the 0th index, so you don't get an early line break) and $index % 4 will correspond to the 5th button overall accounting for the 0th index.
I am trying to show true and false value for each data coming from an API in a table. For true , <td> is
<td><span class="label label-success status-active" title="Active">{{x.exist}}</span></td>
So when the value of {{x.exist}} is true as mentioned in API then span will be label-success status-active" title="Active". Else if false then span will be label-default status-disabled" title="Disabled".
I did this in my view but showing no result
<span ng-if="x.exist == 'true' " class="label label-success status-active" title="Active">
How can I do this in if-else in angular view ?
You need to update the code with below for the span you have added it will show the class and title both based on x.exist values
<span ng-class="(x.exist) ? 'label-success status-active' : 'label-default status-disabled'" title="{{(x.exist) ? 'Active' : 'Disabled'}}" > {{x.exist}}</span>
try
to display true value
<span ng-if="x.exist" class="label label-success status-active" title="Active">
to display false value
<span ng-if="!x.exist" class="label label-success status-active" title="Active">
Also there are ng-show and ng-hide
https://docs.angularjs.org/api/ng/directive/ngShow
I am looking for the first index the passes through my ng-if condition which is not always $index === 0, and cant be solved using $first.
Here's my code sample:
<div class="ticket-event" ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item" ng-class="{'active': $index === $first}"></div>
</div>
I want to add a class in the first occurrence of item.
You don't have to check if $index is $first in:
<div class="title item" ng-class="{'active': $index === $first}">
Change it to:
<div class="title item" ng-class="{'active': $first}">
Why not do this via css?
Assuming "ticket -event" is a spelling mistake, and it should be "ticket-event", the css is straightforward:
.ticket-event div:first-child { // css here }
Here is what you need to do:
<div class="title item" ng-class='{active:$first}'></div>
<tr ng-class="{evaluationRow : $index==0 && item.HighlightBorder==true }" ng-repeat="item in items" >
<td>{{item.LearnerId}} </td>
<td>{{item.Name}}</td>
This has worked for me. Here I'm setting Css class for first element in ng-repeat only if a condition holds true otherwise 'No' Css class is applied.
In above example, "evaluationRow" is the name of Css class to apply, followed by a condition.
You can make use of $first
It will evaluate to true for the first element in ng-repeat
So your code should be
<div class="ticket-event" ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item {{$first?'active':'someotherclass'}}"></div>
</div>
This worked for me
<div class="title item" ng-class='{active:$first}'></div>
I am facing a issue where I want to display the all keys in a table cell but the keys which are already in my db will be displayed with different background color; I tried with ng-repeat twice but it does not get succeed as it repeat the existing keys ;
here is the plunker to get more understanding
and here is the relevant code
d.keys = ['a','b'] // from database
keys = ['a','b','c','d'] // complete list
<span ng-repeat="vk in keys">
<span ng-repeat="dk in d.keys">
<span ng-show="vk === dk" class="key {{ dk }}">{{ dk }}</span>
</span>
<span class="key">{{ vk }}</span>
</span>
</span>
Please suggest any better solution if possible; I read some filter method but didn't get the idea
you really just want to modify the class for the span I believe. Just one ng-repeat and then set the class with ng-class
<span ng-repeat="vk in keys">
<span class="key" ng-class="d.keys.indexOf(vk) >= 0 ? vk : ''">{{ vk }} </span>
</span>
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
{{data.company_name}}
</h1>
</div>
What I'd like to do is make it so that if data.company_name hasn't been added through an input field, it shows a placeholder "Company name", how can that be done using angularjs?
You can use ng-if and do something like
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
<span ng-if="data.company_name === ''">
// Some placeholder
</span>
<span ng-if="data.company_name !== ''">
{{data.company_name}}
</span>
</h1>
</div>
BTW ngIf is a new directive added in v1.1.5 so you might need to upgrade your angular version
See my plunker here : http://plnkr.co/edit/qiN2XshEpay6e6zzhUKP
One way to keep the code clean is to use a filter. This piece of code adds a class to an active tab.
var filters = angular.module('filters');
filters.filter('ie', function(){
return function(v, yes, no){
return v ? yes : no;
};
});
Template
<li class="{{activeTab == 'home' | ie: 'active-class':''}}">
Home
</li>
For Using ng-if, ng-else-if, and ng-else in your project use this:
https://github.com/zachsnow/ng-elif
You can use ng-if condition for the check company name vlaue. Let's take example of
<span ng-if="driver.status_flag == 1">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>
In above example I have added condition status_flag value is 1 then the inside span value will show. Same way with your case you can add statement like
<span ng-if="data.company_name === ''">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>