I am implementing one table with help of ng-repeat. I am calling multiple object in array. So one object have 2 key value, But position may be change. Then I want to set the position of key value.
angular.module('appTest', [])
.controller("repeatCtrl", function($scope) {
$scope.predictediveData =
[
{
"mark": 0.99999,
"class": "NONE"
},
{
"mark": 0.999099,
"class": "first",
},
{
"class": "second",
"mark": 0.9990999,
},
{
"mark": 0.9990999,
"class": "seven",
}
]
})
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="table-responsive">
<body ng-app="appTest">
<section ng-controller="repeatCtrl">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr bolder>
<th class="bordered bg-primary" style="color:#fff">class</th>
<th class="bordered bg-primary" style="color:#fff">Percentage(%)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in predictediveData">
<td ng-repeat="(key,value) in item"><p>{{value}}</p></td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</div>
Above snippet is working fine. But Same code in my project, It is giving me output like below:
Code is same, I copied same code in snippet then it is working fine but the same code is not working in my project. I am using angular version 1.4.2
I want to set value according to heading like class should containes only class name and marks should be come into percentage. I don't know what is the reason. I am sharing my project code.
HTML
<div class="widget-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr bolder>
<th class="bordered bg-primary" style="color:#fff">Class</th>
<th class="bordered bg-primary" style="color:#fff">Percentage(%)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in predictediveData">
<td ng-repeat="(key,value) in item"><p>{{value}}</p></td>
</tr>
</tbody>
</table>
</div>
</div>
JAVASCRIPT:
$scope.predictediveData =
[
{
"mark": 0.99999,
"class": "NONE"
},
{
"mark": 0.999099,
"class": "first",
},
{
"class": "second",
"mark": 0.9990999,
},
{
"mark": 0.9990999,
"class": "seven",
}
]
Objects have no order. Use an array of the property names and repeat that
$scope.props = ['mark', 'class'];
View
<tr ng-repeat="item in predictediveData">
<td ng-repeat="prop in props"><p>{{item[prop]}}</p></td>
</tr>
But if you only have a few properties and they are always the same it would be cleaner to not do the inner loop and just create the <td> yourself
<tr ng-repeat="item in predictediveData">
<td><p>{{item.class}}</p></td>
<td><p>{{item.mark}}</p></td>
</tr>
Related
I tried to get the values from the table while loading so that based on data value I can set the background color as an indication on my Dashboard. But am not to access the values can anyone help me.
Thank you.
HTML
<div class="row">
<div id="content1" class="toggle" style="display:none">
<div class="col-sm-8">
<div class="well">
<table id="table1" class="table table-hover" ng-show="mytable1">
<thead>
<tr>
<th></th>
<th>Operational Analysis</th>
<th></th>
<th></th>
<th ng-repeat="item in yearList">{{item.years}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="operation in dataOperationList">
<td class="details-control"></td>
<td>{{operation.reportTypeDetail}}</td>
<td>{{operation.reportFormula}}</td>
<td>{{operation.reportRang}}</td>
<td>{{operation.year5}}</td>
<td>{{operation.year4}}</td>
<td>{{operation.year3}}</td>
<td>{{operation.year2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I tried by jQuery
$(document).ready(function(){
$("#table1 tbody tr").each(function() {
// Within tr we find the last td child element and get content
alert($(this).find("td:last-child").html());
});
});
but it didnt work.
You can simply use ngClass directive, it allows you to dynamically add CSS classes to an element. https://docs.angularjs.org/api/ng/directive/ngClass
For example if you want to add a green background the a td element if it has 2019 as a content, first you should define a CSS class :
.green{ backgroud: green; }
Then, use the ngClass directive on the td element :
<td ng-class="{green: (operation.year2 == '2019')}">{{operation.year2}}</td>
Update :
You can also use ngStyle directive if want to get the color from a variable:
<td ng-style="{background: (operation.year2 == '2019')? colorValue : defaultColor}">{{operation.year2}}</td>
colorValue and defaultColor sould be defined somewhere.
Here is the correction, you can test it here : https://jsfiddle.net/abec/6f47jepq/4/
HTML part :
<body ng-app="operationApp" onload="showTableValue()">
<div class="row" ng-controller="operationController">
<div id="content1" class="toggle" style="display:none">
<div class="col-sm-8">
<div class="well">
<table id="table1" class="table table-hover" ng-show="mytable1">
<thead>
<tr>
<th></th>
<th>Operational Analysis</th>
<th></th>
<th></th>
<th ng-repeat="item in yearList">{{item.years}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="operation in dataOperationList">
<td class="details-control"></td>
<td>{{operation.reportTypeDetail}}</td>
<td>{{operation.reportFormula}}</td>
<td>{{operation.reportRang}}</td>
<td>{{operation.year5}}</td>
<td>{{operation.year4}}</td>
<td>{{operation.year3}}</td>
<td>{{operation.year2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
function showTableValue() {
var tbl = document.getElementById('table1');
if (tbl != null) {
for (var j = 1; j < tbl.rows[1].cells.length; j++)
alert(tbl.rows[1].cells[j].innerHTML);
}
}
</script>
</body>
JS part :
var module = angular.module("operationApp", []);
module.controller("operationController", function($scope) {
$scope.mytable1 = true;
$scope.yearList = [{
"years": "2000,2001,2002,2003,2004"
}]
$scope.dataOperationList = [{
"reportTypeDetail": "Report type details 1",
"reportFormula": "Report Formula 1",
"reportRang": "Report Rang 1",
"year2": 1002,
"year3": 1003,
"year4": 1004,
"year5": 1005
},
{
"reportTypeDetail": "Report type details 2",
"reportFormula": "Report Formula 2",
"reportRang": "Report Rang 2",
"year2": 2002,
"year3": 2003,
"year4": 2004,
"year5": 2005
}
];
});
I have a table created using ng-repeat. In this table i have the used ng-repeat-start and ng-repeat-end in order to hide some row which will be visible only when the user wants to see it. Now my problem is that when i try to export this table to Excel the rows which are visible only appear in the excel also as there are rows which are linked each other appear as different rows(as in the table also they are different rows). Now what i want is that all the rows whether visible or not should appear in the excel. An is there a way that two rows which are linked to each other(as they contain data related to one single instance) can appear as single row in excel. Here is my code
function myCtrl($scope) {
$scope.exportData = function () {
var table = document.getElementById('exportable');
var html = table.outerHTML;
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
};
$scope.items = [{
"Name": "Name1",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia", "apple"]
}, {
"Name": "Name2",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia", "iPhone"]
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<div ng-controller="myCtrl">
<button ng-click="exportData()" >Export</button>
<br />
<table width="100%" id='exportable'>
<thead>
<tr >
<th></th>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in items">
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
<td>
<button ng-click="item.expanded=true">
more
</button>
</td>
</tr>
<tr ng-repeat-end ng-if="item.expanded">
<td colspan=''>
</td>
<td colspan=''>
Hello
</td>
<td >
<button ng-click="item.expanded=false">
Hide
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Here is the Fiddle
Any Help would be appreciated Thanks.
use ng-show insted of ng-if fiddle
<tr ng-repeat-end ng-show="item.expanded">
I am facing one issue.I need to display some array of data inside table using Angular.js.I am explaining my code below.
Table:
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<tbody>
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
<tr>
<td>Order Id</td>
<td>Status</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I am explaining my array of data below.
$scope.listOfData=
[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
]
I need to display above data into the table using Angular.js.please help me.
Run this code and check out the output. Let me know if you need different format.. cheers!!!
var app = angular.module("myApp",[]);
app.controller("AppController",['$scope',AppController]);
function AppController($scope) {
$scope.listOfData=[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
];
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="AppController">
<table cellspacing="5px" style="border:1px solid black;">
<tr >
<th>Date</th>
<th>id</th>
<th>email</th>
<th>Order</th>
</tr>
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr>
<th>Order stat</th>
<th>Id<th>
</tr>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
<!--
This is for table inside row.
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr> -->
Try this
<tr ng-repeat="(key,list) in listOfData">
<td ng-repeat="(key, lists) in list.order "> {{lists.order_status}}</td>
<td ng-repeat="(key, lists) in list.order "> {{lists.order_id}}</td>
</tr>
Make you header fixed of the table, put it outside of your loop.
Put this outside of the loop i.e ng-repeat
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
You don't want to create it for every item, as it's going to be fixed.
Now, iterate through your list of json objects, using ng-repeat, as explained above.
Something like this..
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<div ng-repeat="list in listOfData">
{{list.id}}
<div ng-repeat="oderlist in list.order">
{{orderlist.order_id}}
</div>
</div>
</table>
You can modify it accordingly.
This will help you,
<tr ng-repeat="item in listOfData">
<td>
<ul>
<li>
{{item.order}} // or print your array element there
</li>
</ul>
</td>
I have a json containing revision/history info of modified entity which holds its old and new values. Diff is generated with https://github.com/benjamine/jsondiffpatch and I've done additional parsing myself to form final json format to be rendered.
Example data:
[
{
"createdBy": "admin#localhost",
"modifiedAt": 1445113889873,
"left": [
{
"Status": "Open"
}
],
"right": [
{
"Status": "In Progress"
}
]
},
{
"createdBy": "admin#localhost",
"modifiedAt": 1445114315786,
"left": [
{
"Description": "hello"
},
{
"Assignee": "Uncle Bob (test#test)"
}
],
"right": [
{
"Description": "bye"
},
{
"Assignee": "Willy Wonka (willy#hello)"
}
]
}
]
I am looking a nice way to form a table for this where for each revision I get separately left and right columns and values on separate rows. Probably tired, but I can't figure out how would ng-repeat work for this:
<div ng-repeat="(key, value) in vm.revisions | orderBy:'-modifiedAt'">
<table class="table">
<thead>
<tr>
<th width="20%">Field</th>
<th width="40%">Old Value</th>
<th width="40%">New Value</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I am hoping for result like this:
Thanks in advance!
If I am right about data format:
<div ng-repeat="revision in vm.revisions | orderBy:'-modifiedAt'">
<table class="table">
<thead>
<tr>
<th width="20%">Field</th>
<th width="40%">Old Value</th>
<th width="40%">New Value</th>
</tr>
</thead>
<tbody ng-repeat="(index, left) in revision.left">
<tr ng-repeat="(field, leftValue) in left">
<td>{{field}}</td>
<td>{{leftValue}}</td>
<td>{{revision.right[index][field]}}</td>
</tr>
</tbody>
</table>
</div>
See it on jsfiddle: http://jsfiddle.net/q6zqgfr8/
I am facing a problem while creating a table using Mushtache.js
View file:
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Email ID</th>
<th class="header">Contact Number</th>
<th class="header">Edit</th>
</tr>
</thead>
<tbody>
<div id="eTableList"></div>
<script id="eList" type="text/template">
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
</script>
</tbody>
</table>
JS code:
function createTable(jsonEData){
var template = $("#eList").html();
expList = Mustache.render(template, jsonEData);
$("#expertTableList").html(expList);
}
I am calling this method as
<script language="javascript">
$(document).ready(function(){
createTable(<?php echo $this->eList;?>);
})
</script>
and the value of $this->eList = jsonEData is
[
{
"id": "52d3d523bdde226f17a581ba",
"name": "shgajsah",
"email": "0",
"contact_number": 2147483647
},
{
"id": "52d3d5c8bdde22c817a581ba",
"name": "fffsdf",
"email": "asa#ddjdj.com",
"contact_number": 323323232
}
]
I am not getting any error but table is not getting populated using above code. So please tell me where I am doing wrong?
You're not iterating over your items, give this a shot:
{{#.}}
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
{{/.}}
or perhaps:
{{#each .}}
<tr> ... </tr>
{{/each .}}