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.
Related
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 have a array of task in which there are two duplicate departments, but i dont want to show the second duplicate record in ng-repeat, but only for the first record i want to show even if it is duplicate.
Here is my code, can anyone tell me where i'm going wrong.
<tr ng-repeat="t in item.requisitionTask track by t.id">
<td>
<div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==$index.department.departmentCode : false">
{{t.department.departmentName}}</div>
</td>
Solved it by targeting the data particularly.
<td><div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==item.requisitionTask[$index].department.departmentCode : false">
I suspect that you want to hide data if the previous item contains the same departmentCode as your current item. As mentioned in my comment, you should move this logic into a function on your controller's scope.
<tr ng-repeat="t in item.requisitionTask track by t.id">
<td>
<div ng-hide="isNotFirstOrSameCodeAsPrevious($index)">
{{t.department.departmentName}}
</div>
</td>
</tr>
In your controller:
function isNotFirstOrSameCodeAsPrevious($index) {
if ($index === 0) return false;
return item.requisitionTask[$index - 1].department.departmentCode ===
item.requisitionTask[$index].department.departmentCode;
}
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>
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>
I have an ng-repeat that requires nested interpolation to be evaluated. Here is an example:
<div ng-repeat="i in ['1', '2', '3']">
should evaluate to {{ i }}: {{ (i>0) && ( {{ i }} ) || false }}
</div>
This throughs a $parse error. The problem I figure is that Angular can't perform nested evaluation operations, or support nested interpolation.
Is there a way around this problem?
I had a similar issue when trying to create a dynamic table component. With the following code I'm able to display any table from the database on the front end without having to define anything thanks to nested interpolation.
You just need to use square brackets for the nested interpolation.
E.G: {{row[[col.column_name]]}}
<table id="dynamicTable" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th *ngFor="let col of Columns">{{col.column_name}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of Table">
<td *ngFor="let col of Columns">{{row[[col.column_name]]}}</td>
</tr>
</tbody>
</table>
Hope this helps! (Working with Angular 7)
It's giving you parse error because you can't nest {{}}..
{{ code }} basically tells angular that whatever is inside {{ }} (code in my case) is JavaScript, and js doesn't understand {{ }} syntax. This is why second {{ i }} is causing a problem.
You might also want to look at ngRepeat docs - there are some special properties, like $index, that you can use.. https://docs.angularjs.org/api/ng/directive/ngRepeat
I can't understand what's this {{ i }}: {{ (i>0) && ( {{ i }} ) || false }} statement is about , also you cannot have nested {{}} in angular js.
Are you trying to make
Working Demo
<div ng-controller="MyCtrl">
<div ng-repeat="i in ['0','1', '2', '3']">
{{ i>0 ? true: false }}
</div>
</div>
The result of what's in the {{}} will be printed - no need to nest:
<div ng-repeat="i in ['0','1', '2', '3']"> {{ i > 0 ? i : false }} </div>