I am trying to get the data from a json without keys in to a table.
[
[
"valu10", //row1 col1
"valu11", //row1 col2
"valu12",
"valu13"
],
[
"valu20",
"valu21",
"valu22",
"valu23"
],
[
"valu30",
"valu31",
"valu32",
"valu33"
]
]
In my success block I was getting the data in alert box. How can I get these data in the angular table. I tried doing the following,
........
}).success(function(data, status, headers, config) {
var log = [];
var data1 = angular.fromJson(eval(data));
var rowList = data1;
$scope.rows = rowList;
}).error(function(data, status, headers, config) {
alert("error");
});
in html:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in rows">
{{item}}
</tr>
</tbody>
</table>
I've created a JSFiddle for you, hope that it will help you:
https://jsfiddle.net/oronbdd/h4sor3w4/1/
Angualr controller:
var app = angular.module('plunker', []);
app.factory('myService', function($http) {
return {
async: function() {
return $http.get('https://api.myjson.com/bins/368hv');
}
};
});
app.controller('MainCtrl', function( myService,$scope) {
$scope.data = "oron";
myService.async().then(function(d) {
$scope.data = d.data;
});
});
HTML:
<div ng-app="plunker">
<div ng-controller="MainCtrl">
JSON:{{data}}<br>
<br/>
ANSWER:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="x in data">{{$index}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="array in data">
<td ng-repeat="item in array">
{{item}}
</td>
</tr>
</tbody>
</table>
</div>
Related
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
I'm try to implement DataTables with Angular, I'm googled and some many solutions is creating directives, its ok but is very old only "normal" way draw a DataTable, the problem is sorting or typing into search box my data is lost!! E.g:
And my code:
View
var myApp = angular.module('myApp', ['ngRoute','ui.utils']);
myApp.controller("CompanyController", function ($scope, $window, CompanyService) {
$scope.Companies = [];
$scope.Company = {};
$scope.dataTableOpt = {
//custom datatable options
"aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, 'All']],
};
$scope.$watch("data", function (value) {
console.log("Data changed, refresh table:");
var val = value || null;
if (val) {
}
});
$scope.InitializeIndexView = function () {
var getAllProcess = CompanyService.GetAllCompanies();
getAllProcess.then(function (response) {
//console.log(response.data)
$scope.Companies = response.data;
},
function (response) {
console.log(response);
})
}
});
<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.5.8/angular.min.js"></script>
<table id="company-table" class="table table-striped table-bordered" ui-jq="DataTable" ui-options="dataTableOpt">
<thead>
<tr>
<th>Id</th>
<th>Register time</th>
<th>Short Name</th>
<th>Long Name</th>
<th>Status</th>
<th>Owner Client</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Companies">
<td>{{item._id}}</td>
<td>{{item.RegisterTime}}</td>
<td>{{item.LongName}}</td>
<td>{{item.ShortName}}</td>
<td>{{item.CompanyStatus}}</td>
<td>{{item.OwnerClient}}</td>
<td>Edit | Delete</td>
</tr>
</tbody>
</table>
Edit 1:
I follow these snippet and works fine because data is static: http://codepen.io/kalaiselvan/pen/RRBzda
Angular Js
var app = angular.module('myApp', ['datatables']);
app.controller("myCtrl", function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.isDisabledupdate = true;
$scope.GetAllData = function () {
$http({
method: "get",
url: "http://localhost:8200/Employee/Get_AllEmployee"
}).then(function (response) {
$scope.employees = response.data;
}, function () {
alert("Error Occur");
})
};
$scope.vm = {};
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
View Page
<div class="panel-body" ng-init="GetAllData()">
<div class="table-responsive">
<table class="table table-striped table-bordered" datatable="ng" dt-options="vm.dtOptions">
<thead>
<tr>
<th>S.no</th>
<th>
ID
</th>
<th>
City Name
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Emp in employees">
<td>{{$index+1}}</td>
<td>
{{Emp.CId}}
</td>
<td>
{{Emp.CityName}}
</td>
<td>
<button type="button" class="btn btn-default btn" ng-click="getCustomer(Emp)"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="deleteemp(Emp)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>
I hope this code will help you....
I created a table using angular. Some rows in the table have child rows with the same properties as parent. I want to create the child rows whenever the user clicks on the parent row (parent rows would have a carrot sign that specifies there are some child rows). I am really new to angular and I need to see an example so that I can understand how it happens in angular. can anybody help?
here is my html:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="student in students">
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in children">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>
the "hasChildren" cell would have a carrot sign which will collapse and expand the children rows.
here is the js file:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
$http({
method: 'GET',
url: contextPath + '/students'
})
.then(function (response) {
var students = response.data;
$scope.students = students;
});
$scope.getChildren = function(student){
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
var children = response.data;
$scope.children = children;
});
}
})
Take a look on that approach
<table>
<tbody ng-repeat="parent in parents">
<tr>
<td>
Parent ...
</td>
</tr>
<tr ng-show="SomeCarrotCondition(parent)" ng-repeat="child in parent.children">
<td>
Child...
</td>
</tr>
</tbody>
</table>
Code sample:
$scope.getChildren = function(student) {
studen.expanded = !student.expanded; // expand/collapse items
if (student.children) { // request a server only once to get the children
return;
}
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
student.children = response.data; // fill student children collection
});
}
HTML sample:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody data-ng-repeat="student in students">
<tr>
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in student.children"
ng-show="student.expanded">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>
My aim is to get the table to display data like the one below. I manage to display the years on top and first vertical column(company) down but how do I get yield data for each company and display it in each row? ps. I am very new to angular.
<table>
<thead>
<tr><th></th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th></tr>
</thead>
<tbody>
<tr><td>ABC</td><td>2.03</td><td>2.22</td><td>2.44</td><td>2.57</td><td>2.69</td></tr>
<tr><td>DEF</td><td>1.08</td><td>1.14</td><td>1.19</td><td>1.25</td><td>1.32</td></tr>
</tbody>
</table>
JSON
{
"years":[
2015,
2016,
2017,
2018,
2019
],
"yields":[
{
"company":"ABC",
"yield":{
"2015":2.03000,
"2016":2.22000,
"2017":2.44000,
"2018":2.57000,
"2019":2.69000
}
},
{
"company":"DEF",
"yield":{
"2015":1.08000,
"2016":1.14000,
"2017":1.19000,
"2018":1.25000,
"2019":1.32000
}
}
]
}
HTML
<table data-ng-controller="dividendController as divd">
<thead>
<tr>
<th></th>
<th data-ng-repeat="y in year">{{y}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in yields">
<td>{{c.company}}</td>
<td data-ng-repeat="n in divYield">{{n}}</td>
</tr>
</tbody>
</table>
CONTROLLER
(function (angular) {
'use strict';
angular.module('example', [])
.controller('dividendController', function ($scope, $http) {
$http.get("api/myapi/myexample")
.success(function (response) {
$scope.year = response.years;
$scope.yields = response.yields;
$scope.divYieldList = [];
$scope.company = [];
angular.forEach(response.yields, function (obj, index) {
$scope.company.push(obj.company);
$scope.divYield = [];
angular.forEach(obj.yield, function (yld, index) {
$scope.divYield.push(yld);
});
$scope.divYieldList.push($scope.divYield);
});
});
});
})(window.angular);
<div ng-init='TesData={"years":[2015,2016,2017,2018,2019],"yields": [{"company":"abc","yield":{"2015":2.03000,"2016":2.22000,"2017":2.44000,"2018":2.57000,"2019":2.69000} },{"company":"def","yield":{"2015":1.08000,"2016":1.14000,"2017":1.19000,"2018":1.25000,"2019":1.32000}}]};'>
<table>
<thead>
<tr>
<th></th>
<th data-ng-repeat="y in TesData.years">{{y}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in TesData.yields">
<td>{{c.company}}</td>
<td data-ng-repeat="n in c.yield">{{n}}</td>
</tr>
</tbody>
</table>
</div>
I have a problem with my angular datatables .
First, My code work very good, but after i add the code configure notSortable() for some colum , the ng-click of button is not working , and i can't fix it . Could you help me?
Here are my Code :
1> File index.html
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td ng-bind="person.id"></td>
<td ng-bind="person.firstName"></td>
<td ng-bind="person.lastName"></td>
<td>
<input type="button" ng-click="doClick()">
</td>
</tr>
</tbody>
</table>
2>File app.js
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.persons = [];
$http.get('data.json').success(function(persons) {
$scope.persons = persons;
});
$scope.doClick=function(){
alert("Clicked button !")
}
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(40);
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID').notSortable(),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
DTColumnBuilder.newColumn('Button').withTitle('Button')
];
});
})(angular);
Don't use
<input type="button" ng-click="doClick()">
In stead of that try to use:
<button type="button" ng-click="doClick()">Send</button>
Be sure to specify the controller in your index.html with ng-controller='simpleCtrl'
I had the same issue, below is the solution that worked for me
**1. Step 1 is same , repeating for the sake of completeness**
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td ng-bind="person.id"></td>
<td ng-bind="person.firstName"></td>
<td ng-bind="person.lastName"></td>
<td>
<input type="button" ng-click="doClick()">
</td>
</tr>
</tbody>
</table>
**Step2, In Controller, do the following**
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.persons = []
$scope.init = function() {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('aLengthMenu', [[-1], ['All']]) // Length of how many to show per pagination.
.withPaginationType('full_numbers')
.withBootstrap();
$http.get("data.json").then( function(result){
$scope.persons = result.data
});
}
$scope.init()
});
})(angular);