In my code, based on the result, I am displaying the message using
<span ng-if="data.length >= 1" class="badge badge-success">{{data.length}}</span>
<span ng-if="data.length == 0" class="badge badge-error">{{data.length}}</span>
2 Doubts :
First:
<ng-pluralize count="data.length" offset=2
when="{'0' : 'No driver. :-(',
'1' : ' driver !',
'2' : ' {{data[0].Driver.givenName}}, {{data[1].Driver.givenName}} driver !',
'other': ' {{data[0].Driver.givenName}}, {{data[1].Driver.givenName}} and {} others.'}">
</ng-pluralize>
Above code displays :
Found: 13 Sebastian, Fernando and 11 others.
I know that the first green oval is from <span /> tag with class "badge badge-success",
What if I Want to color the other integer value (11) to
<span class="badge badge-warning">11</span>
I mean I should get the result like :
Second:
<!--span ng-class="{ 'badge badge-success' : data.length > 1, badge badge-error }"> {{data.length}}</span--> //Why this is not working ?
Anyways, This I have achieved by using `ng-if` by using 2 span tags, but just for my understanding what is wrong in this span tag conditioning.
I chose an Alternative solution, Used ng-switch
<div ng-switch="data.length">
<div ng-switch-when="0">No drivers. :-(</div>
<div ng-switch-when="1">1 driver!</div>
<div ng-switch-when="2">{{data[0].Driver.givenName}} and {{data[1].Driver.givenName}} driver !</div>
<div ng-switch-default>{{data[0].Driver.givenName}}, {{data[1].Driver.givenName}} and
<span class="badge badge-info">{{data.length - 2}}</span> other !</div>
</div>,
Now it works fines, as I was except for
Related
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>
I have an angular x-editable sample here where i am trying to show / hide a form control based on the status value like,
<div ng-show="user.status == '1'">
<span class="title">Show: </span>
<span editable-text="user.showfield" e-name="showfield">{{ user.showfield || 'empty' }}</span>
</div>
It will be shown only when i save the form. How can I make it show when changing the control field itself?
Fixed demo here.
You can get there by directive e-ng-change.
Sample codes:
<div>
<!-- editable status (select-local) -->
<span class="title">Status: </span>
<!-- by e-ng-change, get result before save, and asign to user.showstatus -->
<span editable-select="user.status" e-ng-change="user.showstatus=$data;" e-name="status" e-ng-options="s.value as s.text for s in statuses">
{{ (statuses | filter:{value: user.status})[0].text || 'Not set' }}
</span>
</div>
<!-- toggle display by user.showstatus -->
<div ng-show="user.showstatus == '1'">
<span class="title">Show: </span>
<span editable-text="user.showfield" e-name="showfield">{{ user.showfield || 'empty' }}</span>
</div>
Credit: Angular x-editable github issue #105
I'm working on a Store application and I need to show 2 different strings based on a response.
If I receive the response with no item title I need to show "No Item Title Found", else, I need to show item's title limited to a certain amount of characters.
Here is my code:
<div ng-switch on="item.title">
<div ng-switch-when="!item.title.length">
<p class="prod-title cursor-pointer"
ng-click="searchCtrl.openItemTab(item,event)">
{{ item.title = 'Title Not Found'}}</p>
</div>
<div ng-switch-default>
<p class="prod-title cursor-pointer"
ng-click="searchCtrl.openItemTab(item,event)">
{{ item.title | limitTo:60 }}</p>
</div>
</div>
I'm able to see Items titles when their length is greater than 0, but, I'm not able to see "No Item Title Found" when length is equal to 0.
Any suggestion? Thanks in advance.
use ng-if directive to show 'Title not found' when you don't have an available title.
<p ng-if='!item.title' class="prod-title cursor-pointer" ng-click="searchCtrl.openItemTab(item,event)">
Title Not Found
</p>
<p ng-if='item.title' class="prod-title cursor-pointer" ng-click="searchCtrl.openItemTab(item,event)">
{{item.title}}
</p>
Make the ng-switch like:
<div ng-switch on="item.title.length">
<div ng-switch-when="0">
Currently what you have means
if item.title (expression) equals true (!item.title.length == item.title) enter the first block
in any other case enter the second.
Plunker
The Error being thrown
=> Errors prevented startup:
While processing files with angular-templates (for target web.browser):
client/templates/rcalendar/day.html:7: Expected tag name after `<`
... {{$index<12?($index === 0?12:...
^
client/templates/rcalendar/week.html:16: Expected tag name after `<`
... {{$index<12?($index === 0?12:...
The offending HTML
<td class="calendar-cell">
<div class="add_event_shade" style="height:100%;" ng-if="!tm.events" ng-show"clickCount" on-touch="hourTouch($event)">
<p style="display:none;">+ New event</p>
<p style="display:none;">{{$index<12?($index === 0?12:$index)+':00 am':($index === 12?$index:$index-12)+':00 pm'}}</p>
</div>
<div ng-class="{'calendar-event-wrap': tm.events}" ng-show="tm.events">
<div ng-repeat="displayEvent in tm.events"
class="calendar-event"
ng-click="eventSelected({event:displayEvent.event})"
ng-style="{left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', top: displayEvent.event.startTimeOffset+'%', height: 37*(displayEvent.event.totalApptTime)+'px'}">
<div class="calendar-event-inner" style="white-space: pre-wrap; font-weight: bold">{{displayEvent.event.title}}</div>
</div>
</div>
</td>
How can I set conditionals in my bindings like this?
I think you have to do something like this :
<p style="display:none;">
{{($index < 12 && $index === 0)? 12 : $index}}:00 am
{{$index === 12? $index : ($index - 12)}}:00 pm
</p>
But be careful, you put a display:none in the p tag.
Edit: As discussed in the comments, to avoid the error given by angular-template we can call a function from the controller instead of evaluating the expression in the p tag
<p>{{getTime($index)}}</p>
<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>