In codeignitor view page using angulerjs showing table with details from database. but have to add condition if Order id getting blank there should be "some text" and it should be editable for enter manually order id entered other its remain same as coming from data base. please check code
<table id="table_id" class="table table-striped table-hover table-bordered" ng-show="numberLoad">
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td>{{rrd.ord_primary_key}}</td>
<td ng-if="rrd.order_id == 'order_id' ">{{rrd.order_id}}</td>
<td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> </td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>
without any codition geting table image with not any condition
with condition image with contion
i want if order getting blank there should text editable in table order id column how can i solve it.
You compare the order_id strict with an empty string:
<td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> </td>
Check if an empty order_id is an empty string, or maybe null or undefined. Then you have to compare like this:
<td editable-text="rrd.order_id" ng-if="rrd.order_id===null "> </td>
or
<td editable-text="rrd.order_id" ng-if="rrd.order_id===undefined "> </td>
Related
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.
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'm receiving a JSON list from server that could contain any number of properties of any name. I need to show that list on my page. Populating a table when you know the names of properties is easy, but for this one I'm totally lost. Any help would be appreciated.
You can do this,
HTML:
<table>
<thead>
<tr>
<th ng-repeat="(header, value) in resultData[0]">
{{header}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in resultData">
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
</table>
Here is a sample
I want to get each row from the datatable of the angularjs and access value from input type text. And process further. I here populating item names from one JSON array.
I want to save this order on save button click. But how to get quantity field value for the further processing as individual for each row?
My html file code:
<table datatable class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr.No</th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in items">
<td>{{$index + 1}}</td>
<td>{{item.name}}</td>
<td>
<input type="text" />
</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
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>