How to conditionally apply a class based on the character count of the model?
E.g.:
$scope.sample = 555;
<span ng-class="{ 'char3': sample.length == 3 }">{{ sample }}</span>
You can convert sample to string and the check its length:
<span ng-class="{ char3: (sample + '').length == 3 }">{{ sample }}</span>
<span ng-class="(sample.length === 3) ? 'three':'notthree'">{{ sample }}</span>
Related
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
<span ng-repeat="sport in profile.sports track by $index">
{{ (profile.type == 2) ? ($index >= 0) ? sports[sport.sport_id] + ", " : sports[sport.sport_id] : '' }}
</span>
I want each element to be separate by , if there is at least 1 item.
Expected result in sports[sport.sport_id]:
cricket, football, hockey
cricket, hockey
cricket
cricket, soccer
Currently I'm getting all these without commas, please suggest, thanks.
You can use javascript join with comma separated
Example
<span ng-repeat="sport in [{value: ['a']}, {value: ['b','c']}]">
<pre>{{sport.value.join(', ')}}</pre>
</span>
Ouput:
a
b, c
try this
<span ng-repeat="sport in profile.sports track by $index">
{{ modifiedSport(sport, $index) }}
</span>
and add this to your controller
$scope.modifiedSport = function(sport, idx){
($scope.profile.type == 2) ? (idx >= 0) ? $scope.sports[sport.sport_id] + ", " : $scope.sports[sport.sport_id] : ''
}
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>
Using Angularjs, I need to compare the value of $index to $parent.$index in a nested ng-repeat and set the value of the class according to this result. This is what I am currently trying-
<td ng-repeat="d in vm.users track by d._id"
ng-class="{showBottomLine : less, showSides : more, showBottomSideLine : equals }">
<div ng-if="$index < $parent.$index" ng-class="showBottomLine">less</div><!--ng-model="less"-->
<div ng-if="$index > $parent.$index" ng-class="showSides">more</div>
<div ng-if="$index === $parent.$index" ng-class="showBottomSideLine">equals</div>
</td>
The syntax for ng-class is as follows:
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
In your case
$parent.$index" ng-class="{'showSides': $index == $parent.index}">
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