I am using smart table but I am not able to sort the table, the following is my code
<div ng-app="app">
<div ng-controller="app-controller">
<table st-table="EmployeeDetails" class="table table-striped table-hover" st-safe-src="EmployeeData">
<thead>
<tr>
<th st-sort="EmployeeName">Employee Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in EmployeeData">
<td class="col-xs-2">
<small>{{employee.EmployeeName}}</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('app-controller', ['$scope','$http', function ($scope,$http) {
$http.get('/Data/EmployeeDetails.json').success(function (data) {
$scope.EmployeeData = data;
}).error(function () {
alert('error');
});
}]);
</script>
can anyone let me know what exactly is wrong, i have referenced both angular.js and smart-table.js
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/smart-table.js"></script>
You should use 'EmployeeDetails' at ng-repeat
JSFiddle
OK
<tr ng-repeat="employee in EmployeeDetails">
NG
<tr ng-repeat="employee in EmployeeData">
Thanks
Related
HI Im new to angular js im trying to display the json content as table.is it possible to change the color based on the value in the json content?
i've tried by adding ng-class which was not working.
Please find the code i've tried
angular.module('mApp')
.controller('mController', main);
function main($http) {
var vm = this;
vm.name = "sathya";
var jsonData = '{"header":{"columns":[{"name":"Services","subcolumns":[{"name":""}]},{"name":"Server1","subcolumns":[{"name":"Status"},{"name":"Action"}]},{"name":"Server2","subcolumns":[{"name":"Status"},{"name":"Action"}]},{"name":"Server3","subcolumns":[{"name":"Status"},{"name":"Action"}]}]},"rows":{"data":[[{"value": "Service1"}, {"value": "Running"}, {"value": "action"}, {"value": "Stopped"}, {"value": "Action"}, {"value": "Running"}, {"value": "Action"}],[{"value":"Service2"},{"value":"Running"},{"value": "Action"},{"value": "Stopped"},{"value":"Action"},{"value":"Running"},{"value": "Action"}]]}}';
vm.table = JSON.parse(jsonData);
vm.subHeaders = function () {
var subs = [];
vm.table.header.columns.forEach(function (col) {
col.subcolumns.forEach(function (sub) {
subs.push(sub);
});
});
return subs;
};
<!DOCTYPE html>
<html ng-app="mApp">
<head>
<meta charset="utf-8" />
</head>
<body ng-controller="mController as mn">
<div class="main">
<div class="bodycontent">
<div class="mainnav">
<div>
<table class="table table-bordered">
<tr>
<th colspan="{{col.subcolumns.length}}" ng-repeat="col in mn.table.header.columns">{{col.name}}</th>
</tr>
<tr>
<th ng-repeat="col in mn.subHeaders()">{{col.name}}</th>
</tr>
<tr ng-repeat="row in mn.table.rows.data">
<td ng-repeat="cell in row" ng-class="{'status_green' : cell.value=='Running', 'status_red' : cell.value=='Stopped'}">{{cell.value}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!---->
<script src="Scripts/angular.min.js"></script>
<script src="App/app.module.js"></script>
<script src="App/Main.js"></script>
</body>
</html>
you could use ng-if statement and try with this:
<div ng-repeat="i in jsonData" style="width:25%">
<table class="table table-bordered" ng-repeat="a in i.data">
<tr>
<th>Value</th>
</tr>
<tr ng-repeat="v in a">
<td ng-if="v.value !== 'Success'"> {{v.value}}</td>
<td ng-if="v.value === 'Success'" style="color:green"> {{v.value}}</td>
</tr>
</table>
</div>
plunker: http://next.plnkr.co/edit/99ySQe5flCzaDbax?preview
Hope it helps!
here what i did, and it's simple
<td><h6 ng-show="employee.status=='Active'" class="green">{{employee.status}}</h6><h6 ng-show="employee.status=='Deactive'" class="yellow">{{employee.status}}</h6> </td>
My code is as below
<div id="createConfigManagementDivId"
class="panel-portal">
<div >
<button ng-click="exportData()" ng-show="(items|filter:{selected: true}).length">Export</button>
<br />
<table width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><input type="checkbox" ng-model="item.selected" /></td>
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
</tr>
</tbody>
</table>
<div id="exportable" style="display:none">
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Terms</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items|filter:{selected: true}">
<td>{{item.Name}}</td>
<td>{{item.Date}}</td>
<td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="jsp/resources/framework//Blob.js"></script>
<script type="text/javascript" src="jsp/resources/framework//FileSaver.js"></script>
<script type="text/javascript"
src="jsp/resources/framework/ConfigMgmtController.js"></script>
controller.js
threeGppHssApp
.controller(
'configMgmtController',
[
'$scope',
'$http',
'$stateParams',
'$filter',
'$window',
function($scope, $http,$stateParams,$filter,$window) {
console.log("Calling controller");
$scope.items = [{
"Name": "ANC101",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia", "apple"]
}, {
"Name": "ABC102",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia", "iPhone"]
}]
$scope.exportData = function () {
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report.xls");
};
}]);
Then I downloaded blob.js and FileSaver.js and copied to the path sp/resources/framework/.
but when i run the above code getting error as Syntax error on File:FileSaver.js Line:1,column:1
and Could not complete the operation due to error 80020101. .
Not sure why fileSaver.js throwing an error ? can you please help me to figure out the issue
I am new for both Angular and datatable.
I am creating ASP.NET MVC Application using this two js and want to display records in the table.
Table displays the records but searching and sorting facility is not available I mean not running. I don't know how to integrate both to use in one page.
Can anyone help me to come out from this problem?
Code:
I have $scope.Customers which has fields Name, Phone , Email and more...
$scope.getCustomers = function () {
customerService.GetCustomers()
.then(
function (response) {
console.log("Get Customer call");
$scope.Customers = response.data.Result;
}
);
}
Here I got the list of customers and binded successfully and my HTML code is:
<table id="tblcustomers" class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
output:
angular module:
var app;
(function () {
app = angular.module("ANG", []);
})();
The DataTable.js filter data after the document is rendered completely.
Use DataTables settings after the document is rendered completely.
see demo here:
var app = angular.module('app', []);
app.directive('testTable', function($timeout) {
return {
restrict: 'A',
link: function() {
$timeout(function() {
$('#tblcustomers').DataTable();
});
}
}
});
var testCtrl = app.controller('testCtrl', function($scope) {
$scope.Customers = [];
var i = 20;
while (i > 0) {
$scope.Customers.push({
CustomerName: 'test' + i,
Adddress_Line_1: 'testAddr' + i,
Phone: '000-000-00' + i,
Email: 'sample' + i + '#xxx.com',
IsActive: true
});
i--;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DataTable test for Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
<table id="tblcustomers" test-table class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
have you troed something like to put in a directive the datatables initialization?
something like:
"use strict";
angular.module("ANG")
.directive("grid", ["$timeout", function ($timeout) {
return {
restrict: "EA",
link: function (scope, element, attrs) {
$timeout(function () {
$(element).DataTable();
}, 200);
}
}
}]);
and then use it like:
<table id="tblcustomers" grid class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
I have an API which return me a JSON array:
{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}
How can I make a table in angular, so the data is displayed correctly?
Currently I have this:
My html code is:
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{x.results}}</td>
</tr>
</tbody>
</table>
Can you help me fix the last column, so instead of displaying all the values in one row, make it display it into different rows?
I believe this might be closer to what Angel Silva is after.
HTML:
<body ng-controller="MainCtrl">
<table class="table table-striped">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody ng-repeat="x in data">
<tr ng-repeat="r in x.results">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{r}}</td>
</tr>
</tbody>
</table>
</body>
JavaScript/AngularJS:
app.controller('MainCtrl', function($scope) {
$scope.data = [{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}];
});
Here's a link to a working Plunker, http://plnkr.co/edit/NrnFI17P932KckzXRcF4?p=preview
Use a second ng-repeat within an <ul> (unordered list):
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>
<ul>
<li ng-repeat="r in x.results">
{{ r }}
</li>
</ul>
</td>
</tr>
</tbody>
</table>
You could create an array of columns which could be named as columns. Loop over columns to render td's data with current x
Controller
$scope.data = {"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]};
$scope.columns = Object.key($scope.data)
Markup
<tr ng-repeat="x in data">
<td ng-repeat="column in columns">{{x[column]}}</td>
</tr>
You can try array.join() method to join all the elements of an array into a string.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.tableR = true;
$scope.data = [{
"i":11,
"j":12,
"iterationNumber":9,
"results":[12,6,3,10,5,16,8,4,2,1]
}];
});
tr,th,td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{x.results.join()}}</td>
</tr>
</tbody>
</table>
</div>
I have a table with ng-repeat:
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody ng-repeat = "i in data">
<td>{{i.key}}</td>
<td>{{i.value}}</td>
</tbody>
</table>
The table is populated with data-ng-init, when the user clicks on a button:
<button ng-click="getNewVals()">new values</button>
I get json with new key-value, my question is how to repopulate the table with the new values baes on the key? is there a angular way to do so?
ng-repeat is bound to the model you are iterating over. If you update the model, ng-repeat will re-draw. In your example, whenever $scope.data changes, the ng-repeat will update itself.
Use this way. It's good if you provide your JSON.
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody>
<tr ng-repeat = "(key, val) in data">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
Look at the following example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in persons">{{x.name}}, {{x.age}}</li>
</ul>
<button ng-click="changeIt()">Change json</button>
<script>
//1 module declaration
var app = angular.module('myApp', []);
//2 controller declaration
app.controller('myCtrl',function($scope){
$scope.persons = [
{name:"Peter", "age": 23},
{name:"Lina","age":26},
{name:"Robert", "age":33}
];
$scope.changeIt = function(){
$scope.persons = [
{name:"Larry",age: 59},
{name:"Joseph", age: 63},
{name:"Clara", age:71}
];
}
});
</script>
</body>
</html>
Hope it solves your problem.
you writing ng-reapet instead of ng-repeat
try this.
<table>
<tr>
<thead>
<th>key</th>
<th>value</th>
</thead>
</tr>
<tbody ng-repeat = "i in data">
<td>{{i.key}}</td>
<td>{{i.value}}</td>
</tbody>
</table>
<button ng-click="data.push({'key':1,'value':2})">new values</button>