I got this in my .html file :
<tr ng-repeat="collab in collabs">
<td>{{collab.firstname}}</td>
<td>{{collab.lastname}}</td>
<td>{{collab.ext}}</td>
</tr>
collab.ext is a boolean value, and I want to show Yes when it is true, and No when it is false.
Does Angular provide something for this? :-)
Ternary operator if ? then : else did the job great:
<tr ng-repeat="collab in collabs">
<td>{{collab.firstname}}</td>
<td>{{collab.lastname}}</td>
<td>{{collab.ext ? 'Yes' : 'No'}}</td>
</tr>
Make attempted to use "ng-if" ?
<div ng-if = "Variable == 5">
<!- we do whatever we want ->
</div>
<div ng-if = 'variable! = 5 ">
<!- we do whatever we want ->
</div>
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
For some condition, I would like replace a String in my model when displaying it in html. I could do this my modifying my model, but is there a more idiomatic option? Possibly this should be done with a filter?
<tr ng-repeat="i in ctrl.data" >
<td>
<div ng-show="i.category == 'default'">
none
</div>
<div ng-show="i.category != 'default'">
{{ i.category }}
</div>
</td>
</tr>
{{ i.category == 'default' ? 'none' : i.category }}
Or, if you have that in several places, use a filter.
I'm rendering data in a table using Angular and ng-repeat. What I would like to do is add an if condition to say if the value contained in ng-repeat is a certain word, set the background colour of that row to red. I think it might look something like this, but I'm not sure how to do this in Angular.
if( {{field.value}} == THING){
var backgroundColour = red;
}
I was thinking of using ng-filter, although I dont wan't to actually filter the data, just set a variable based on a value.
Any ideas?
You could add an ng-class in the html to achieve this.
<div ng-repeat"field in fields" ng-class="{'with-background': field.value == THING}">
{{field.value}}
</div>
And then add with-background to css
.with-background {
background-color: red;
}
If THING is a variable pointing to some other value, you don't have to use quotes and if it's meant to be a string, use it as 'THING'
Here's the official documentation of ngClass: https://docs.angularjs.org/api/ng/directive/ngClass
You cann also use ng-style for this
<div ng-style="field.value == THING?{'background-color':'red'}:{}">
Hello Plunker!
</div>
plunker
You could do something like this below:
<div ng-repeat="field in collections"
ng-if="field.value && field.value =='THING'">
{{backgroundcolor}}
</div>
Or you could you use ng-class directive
<div id="wrap" ng-class="{true: 'yourClassName'}[field.value]">
You can use ng-class directive
<tr ng-class="{'color-red': item.value > 0}" ng-repeat="item in vm.items">
<td>{{ item.value }}>/td>
</tr>
I'm getting Bool value from database to angularJs
<td>
{{patient.Alcoholic}}
</td>
instead of false or ture i need to print YES or NO
<td>
{{patient.Alcoholic // can i have if-else condition over here ??}}
</td>
<td>
{{true == patient.Alcoholic ? 'Yes' : 'No' }}
</td>
This should work!
use ng-if directive
<td ng-if="patient.Alcoholic">Yes</td>
<td ng-if="!patient.Alcoholic">NO</td>
Simply do
<td>
{{ patient.Alcoholic ? 'Yes' : 'No' }}
</td>
Try to not put JS operations in your template, as it will:
Make your template dirty (imho).
Strain the application (very minor argument), as the evaluation is being run on each $digest cycle.
If you are fine with modifying the original bool of the patient:
$scope.patient.Alcoholic = !!$scope.patient.Alcoholic ? 'Yes' : 'No';
If not, I would add another property onto patient:
$scope.patient.isAlcoholic = !!$scope.patient.Alcoholic ? 'Yes' : 'No';
And then in your view (dependent on the solution you've chosen of the two above):
{{ patient.Alcoholic }}
<!-- or -->
{{ patient.isAlcoholic }}
That's my two cents on keeping your template clean.
I have some hierarchical data (some kind of a tree view) that represents an organization chart. I want to show this in a table. I did the following:
<tr ng-repeat="dat in vm.refined" ng-show="dat.show || dat.parent==null">
<td ng-click="vm.toggleShow(dat)" style="cursor: pointer">
<span ng-class="(dat.show===true || dat.parent===null) ? 'glyphicon glyphicon-chevron-right' : 'glyphicon glyphicon-chevron-down'" ></span>
{{dat.value.rbsName}}
</td>
<td>{{dat.parent}}</td> <!-- ignore these two tds -->
<td>{{dat.members}}</td> <!-- ignore these two tds -->
</tr>
vm.refined is an array of objects, defined in the controller which has the name of the unit, its parent (if any, else null) and a show flag to simulate the collapse/expand.
toggleShow() responsibility is to... toggle the show flag in the selected (which will be shown anyway due to being parent) and to its children. So I do something like:
vm.toggleShow=function(dat) {
dat.show=!dat.show;
for(var i=0; i< vm.refined.length; i++) {
if(vm.refined[i].parent==dat.parent)
vm.refined[i].show=!vm.refined[i].show;
}
};
Thing is that when I click the td, toggleShow is called but I will not see the rows I am supposed to see. It seems like a scope issue and ng-repeat but I cannot find a solution around. Can you help? Oh and something else, do you feel it would be better if I write this part as a directive?
Basically you are toggling function is doing nothing. At the start of the function it is toggling flag & then you are looping through the array & when it found you are toggling that flag. By doing that your value is true the it became true only, Nothing will be change in value.
I think you should toggle that flag on html itself
Markup
<tr ng-repeat="dat in vm.refined" ng-show="dat.show || dat.parent">
<td ng-click="dat.show=!dat.show" style="cursor: pointer">
<span ng-class="(dat.show || dat.parent) ? 'glyphicon glyphicon-chevron-right' : 'glyphicon glyphicon-chevron-down'" ></span>
{{dat.value.rbsName}}
</td>
<td>{{dat.parent}}</td> <!-- ignore these two tds -->
<td>{{dat.members}}</td> <!-- ignore these two tds -->
</tr>