I have an array json as follows
$scope.array =[{"id":"1","age":"3","name":"ab"},{"id":"2","age":"2","name":"ee"},{"id":"3","age":"1","name":"dd"}];
I need to show these data in a table using ng-if where if the age is 1 then that cell should have only data related to age = 1 etc. I used the following code.
<html>
<table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<tr>
<tr ng-repeat="record in array">
<td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
</table>
</html>
But currently all the values are shown in the first column one after the other. I can't figure out the reason.
Don't forget to close your tr tag with an end tag. Something like this:
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<tr ng-repeat="record in array">
<td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
</tr>
</tr>
However, in your case, you won't gain nothing by using ng-if. You will get the same output if you use the following code:
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<tr ng-repeat="record in array">
<td>{{record.id}} {{record.name}}</td>
</tr>
</tr>
If you really want to use a ng-if, the way that you're doing is fine.
Related
I am working on a scenario where i am using nested ng-repeat to display the json values in html table.Attached the plunker plnkr.co/edit/qC6v8nOP4iFgjlxezTa1?p=preview.I am not able to see the last column values properly.
You have no problems with AngularJS, but with HTML, try this variant:
<table width="100%">
<thead>
<tr>
<th>Id:</th>
<th>Age:</th>
<th>Subjects:</th>
<th>Only Lecturer Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in student track by $index">
<td>{{x.id}}</td>
<td>{{x.age}}</td>
<td>{{x.subjects}}</td>
<td>
<span ng-repeat="j in x.subjects">
{{j.Lecturer}}
</span>
</td>
</tr>
</tbody>
</table>
I am using nested array in angularjs and bootstrap and that is dynamically coming from server side code.In that displaying table format using rowspan but it is working two level nested array only need to have more level.I tried plunker code.In this example using sample only but I need more levels
<table class="table table-bordered">
<thead>
<tr>
<td>check</td>
<th>Member</th>
<th>Age</th>
<th>Branch</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr ng-repeat="member in group.members">
<td rowspan="{{group.members.length}}" ng-hide="$index>0">
{{group.id}}
</td>
<td >
{{member.name}}
</td>
<td >
{{member.age}}
</td>
<td >
<table >
<tbody>
<tr ng-repeat="stu in member.student" >
<td >{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
FIDDLE
You did not add class="table" for inner table.
Also give padding:0px to td
Fiddle
<td style="padding:0px">
<table class="table">
<tbody>
<tr ng-repeat="stu in member.student" >
<td>{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
I am populating a table like the following using angularjs:
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>{{row.col1}}</td>
<td>{{row.col2}}</td>
<td>{{row.col3}}</td>
<td>{{row.col4}}</td>
<td>{{row.col5}}</td>
</tr>
</tbody>
</table>
because the table has a lot of columns which often contain no values (NULL), I would like to hide those columns.
note: all rows would have that column value NULL.
Example (row.col1=NULL, row.col3=NULL):
<table>
<thead>
<tr>
<th>col2</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>{{row.col2}}</td>
<td>{{row.col4}}</td>
<td>{{row.col5}}</td>
</tr>
</tbody>
</table>
so far I was not able to find/figure out a solution for this.
I'm starting to believe that this is not possible to do...
You could a global array that has a boolean variable for each column you want, and set that boolean accordingly.
$scope.showColumn = [false, false, false, false];
Use a function to display your column value that way you get to set your booleans in case you encounter a non-null value.
$scope.setVisible = function(colNum, colVal){
if(colVal)
$scope.showColumn[ colNum ] =true;
return colVal;
};
You'll then have to check the boolean for display and use the function for your column value:
<tr ng-repeat="friend in friends">
<td ng-show="showColumn[0]">{{ setVisible(0, friend.name ) }}</td>
...
See Working plunk (try giving a 'none' property to any friend)
This is very easy to do in an ng-repeat. Just use ng-if.
<table>
<thead>
<tr>
<th>col2</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
// ADD NG-IF TO YOUR REPEATER
<tr ng-repeat="row in rows" ng-if="row.col1 != null">
<td>{{row.col2}}</td>
<td>{{row.col4}}</td>
<td>{{row.col5}}</td>
</tr>
</tbody>
</table>
I want to fetch the data inside table but not getting any data.
Code is here--
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr>
<th><b>Project Name :</b></th>
<td ng-repeat="a in viewProjects">
{{a.id}}
</td>
{{viewProjects | json}}
</tr>
</tbody>
</table>
</div>
getting all data in viewProjects through json but unable to print it inside table row n each function of controller services and models working perfactly except this.
Please help me to get this issue.
You can use <ng-container ng-repeat=""></ng-container> for any angularJS condition without use any html element as below :
<table>
<tr>
<td>xyz</td>
<ng-container ng-repeat="a in myArray">
<td>{{a.id}}</td>
</ng-container>
</tr>
</table>
It looks like you should loop over tr instead of td in this case
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in viewProjects">
<td><b>Project Name :</b></td>
<td >
{{a.id}}
</td>
</tr>
</tbody>
</table>
</div>
var dataList = [{Id:1,Name: "xyz",Select: true},
{Id:2,Name: "PQR",Select : false }];
var headerList = [{"ID","Name","null"}]
i got this value from server side i can not make any changes in this array list.
My html code is
<table class= "table table-bordered">
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td ng-repeat="value in data" ng-if="!$last">
{{value}}
</td>
</tr>
</tbody>
</table>
I don't want to generate "Select" column. code works propely , but when bordered class applies on table one blank column is display i.e "Select"
so that how can i remove this blank column in html DOM ?
You might want to write
<thead>
<tr>
<td ng-if="!$last" ng-repeat="header in headerList">
{{header}}
</td>
</tr>
</thead>
instead of this
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>