I have table and i show data, with dynamic columns and data. As input data i have an array of values
here is my plunker
angular.module('plunker', ['ngMaterial','md.data.table'])
.config(['$mdThemingProvider', function ($mdThemingProvider) {
'use strict';
$mdThemingProvider.theme('default')
.primaryPalette('blue');
}])
.controller('MainCtrl', function($scope) {
var vm = $scope;
vm.test = '123';
vm.query = {
order: 'starttime',
limit: 25,
page: 1
};
vm.tabQuery = {
limit: 2,
page: 1
};
vm.data = {
"title": "Summary Reports -> manipulate",
"content": [
[
"a1s2",
"1"
],
[
"aaa",
"1"
],
[
"ccc",
"1"
],
[
"eee",
"1"
],
[
"ggg",
"1"
],
[
"iii",
"1"
],
[
"kkk",
"1"
],
[
"mmm",
"1"
],
[
"ooo",
"1"
],
[
"qqq",
"1"
],
[
"sss",
"1"
]
],
"columns": [
"name1",
"name2"
],
"transactionLogId": 432903
};
$scope.name = 'Plunker';
});
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
h1,
p {
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<md-toolbar class="md-table-toolbar md-default">
<div class="md-toolbar-tools" layout-align="end center">
<span class="md-subhead">Summary Report</span>
<div flex></div>
</div>
</md-toolbar>
<md-table-container md-scroll-y layout-fill layout="column" class="md-padding">
<table class="md-table" md-table md-progress="promise" style="font-size: 11px !important;">
<thead md-head>
<tr md-row>
<th md-column ng-repeat="col in data.columns track by $index"> {{ col }}</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="val in data.content track by $index">
<td ng-repeat="el in val track by $index" md-cell ng-bind="el"></td>
</tr>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="3" md-boundary-links="true" md-limit-options="[5, 10, 15]" md-page="tabQuery.page" md-total="{{(data.content).length}}"></md-table-pagination>
</div>
<script src="lib/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.2/angular-material.min.js"></script>
<script src="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
</body>
</html>
My pagination via array of array doesn't works in this table.
I'm also tried add this part to ng-repeat:
"| limitTo: query.limit : (query.page -1) * query.limit"
The problem is: there is a table in AngularJS, there are, for example, 2 columns (maybe 5 and 10, they are dynamic) and also dynamic data, I bring an array for these columns into the table, for example I took 2 columns and 11 records, brought them into the table and made them the table showed 3 items, but it shows all 11 and pagination does not seem to rob, can anyone pushed with this?
Solved, I've added | limitTo: query.limit : (query.page -1) * query.limit to <td ng-repeat="el in val track by $index" md-cell>{{ el }}</td> and deleted ng-bind="el" (changed to {{ el }}) now it works as expect
Related
I am trying to put a list li inside a row of a table using ng repeat.
My code below of what I am trying to achieve:
<td>
<div ng-repeat="x in total.count">
<ul>
<li>
{{x.key}}
</li>
</ul>
</div>
</td>
A sample of total:
"total": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0,
"count": [
{
"key": "0",
"doc_count": 83714
},
{
"key": "1",
"doc_count": 11034
}
The issue is that nothing is appearing. But when I hard code the li, it works.
Can somebody advise me on how to do it in angularjs using ng-repeat ?
Try this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.object = {"total": {
"doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0,
"count": [
{
"key": "0",
"doc_count": 83714
},
{
"key": "1",
"doc_count": 11034
}]
}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table border=1>
<tr>
<td>
<ul>
<li ng-repeat="x in object.total.count">
{{x.key}}
</li>
</ul>
</td>
</tr>
</table>
</div>
Try and use the ng-repeat on the li element, the ng-repeat makes a "copy" of the element its placed in. So this will repeat the list item element.
<td>
<ul>
<li ng-repeat="x in total.count">
{{x.key}}
</li>
</ul>
</td>
You are repeating a list with one element, not the element itself
I need to filter table - after click name in the list:
<ul ng-repeat="f in filter">
<li ng-model="search.name">
<a class="left-menu-link">
{{f}}
</a>
</li>
</ul>
The table should list only that name which I chose.
My plunker: http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview
// Code goes here
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = [{
"name": "afdfg Nixon",
"system": "System Architect"
},
{
"name": "sdfasdfas",
"system": "System Architect"
},
{
"name": "ggg Nigadfgxon",
"system": "System Architect"
},
{
"name": "Tiger sdd",
"system": "System Architect"
},
{
"name": "aaa Nixon",
"system": "System Architect"
}
];
$scope.filter = [
"afdfg Nixon",
"sdfasdfas",
"ggg Nigadfgxon",
"Tiger sdd",
"aaa Nixon"
];
});
<html ng-app="app" ng-cloak>
<head>
<style>
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="FirstCtrl as vm">
<ul ng-repeat="f in filter">
<li ng-model="search.name">
<a class="left-menu-link">
{{f}}
</a>
</li>
</ul>
<input ng-model="search.name" />
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name
<th>System
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in data | filter:search">
<td style="word-break:break-all;">{{n.name}}</td>
<td>{{n.system}}</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks for answers in advance!
You can use an ng-click on your anchor tag in the li using ng-click=onClick(f) like this:
$scope.onClick = function(name) {
$scope.search = $scope.search || {};
$scope.search.name = name;
}
See demo below and updated plunker:
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = [{
"name": "afdfg Nixon",
"system": "System Architect"
},
{
"name": "sdfasdfas",
"system": "System Architect"
},
{
"name": "ggg Nigadfgxon",
"system": "System Architect"
},
{
"name": "Tiger sdd",
"system": "System Architect"
},
{
"name": "aaa Nixon",
"system": "System Architect"
}
];
$scope.filter = [
"afdfg Nixon",
"sdfasdfas",
"ggg Nigadfgxon",
"Tiger sdd",
"aaa Nixon"
];
$scope.onClick = function(name) {
$scope.search = $scope.search || {};
$scope.search.name = name;
}
});
<html ng-app="app" ng-cloak>
<head>
<style>
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="FirstCtrl as vm">
<ul ng-repeat="f in filter">
<li>
<a href="#" class="left-menu-link" ng-click=onClick(f)>{{f}}</a>
</li>
</ul>
<input ng-model="search.name" />
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name
<th>System
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in data | filter:search">
<td style="word-break:break-all;">{{n.name}}</td>
<td>{{n.system}}</td>
</tr>
</tbody>
</table>
</body>
</html>
Replace this line
<tr ng-repeat="n in data | filter:search">
with
<tr ng-repeat="n in data | filter:search.name">
You are missing the name property of search
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.data=[
{
"name" : "afdfg Nixon",
"system" : "System Architect"
},
{
"name" : "sdfasdfas",
"system" : "System Architect"
},
{
"name" : "ggg Nigadfgxon",
"system" : "System Architect"
},
{
"name" : "Tiger sdd",
"system" : "System Architect"
},
{
"name" : "aaa Nixon",
"system" : "System Architect"
}
];
$scope.filter=[
"afdfg Nixon",
"sdfasdfas",
"ggg Nigadfgxon",
"Tiger sdd",
"aaa Nixon"
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="FirstCtrl as vm">
<ul ng-repeat="f in filter">
<li ng-model="search.name">
<a class="left-menu-link">
{{f}}
</a>
</li>
</ul>
<input ng-model="search.name" />
<table class="table table-bordered table-striped">
<thead>
<tr>
<th >Name
<th >System
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in data | filter:search.name">
<td style ="word-break:break-all;">{{n.name}}</td>
<td>{{n.system}}</td>
</tr>
</tbody>
</table>
</body>
You have used controlerAs syntax in the view but in controller didn't use this variable. so firstly use this instead of $scope in controller.
Other problem is binding ng-model to li tag. you can not do this.So i just use ng-click to set search filter variable with clicke on li.
// Code goes here
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
var vm = this;
vm.data = [{
"name": "afdfg Nixon",
"system": "System Architect"
},
{
"name": "sdfasdfas",
"system": "System Architect"
},
{
"name": "ggg Nigadfgxon",
"system": "System Architect"
},
{
"name": "Tiger sdd",
"system": "System Architect"
},
{
"name": "aaa Nixon",
"system": "System Architect"
}
];
vm.filter = [
"afdfg Nixon",
"sdfasdfas",
"ggg Nigadfgxon",
"Tiger sdd",
"aaa Nixon"
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl as vm">
<ul ng-repeat="f in vm.filter">
<li ng-click="vm.search = f">
<a class="left-menu-link">
{{f}}
</a>
</li>
</ul>
<input ng-model="vm.search.name" />
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name
<th>System
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in vm.data | filter:vm.search">
<td style="word-break:break-all;">{{n.name}}</td>
<td>{{n.system}}</td>
</tr>
</tbody>
</table>
</div>
In my DB I have Datastructure like this
"Projects":[{
"Year2016":[{"Name": "Project1"},{"Name": "Project2"}],
"Year2017":[{"Name": "Project1"},{"Name": "Project2"}]
}]
with ng-repeat i go
ng-repeat="year in Projects"
<b>{{year | limitTo:4:6}}</b>
instead of 2016 i get the whole {"Year2016":.....}
if i put the query response in the code as a string it works as suspected but
for some reason the limitTo is not working on the new ng-repeat "variable"
Is it possible at all?
you should use a (key, value) syntax ng-repeat to loop through json object array with the keys.
refer the below example:
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.data = {
"Projects": [{
"Year2016": [{
"Name": "Project1"
}, {
"Name": "Project2"
}],
"Year2017": [{
"Name": "Project1"
}, {
"Name": "Project2"
}]
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div ng-repeat="project in data.Projects">
<div ng-repeat="(key, value) in project">
<b>{{key | limitTo:4:4}}</b>
<div ng-repeat="item in value">
<span>{{item.Name}}</span>
</div>
</div>
</div>
</div>
last field id for starting index so your ng repeat should be
ng-repeat="year in Projects"
<b>{{year | limitTo:4:4}}</b>
I am trying to give a table the ability to sort by all columns, but having a bit of trouble. I am pulling some data from a webservice to populate the table but then want to sort wherever the user wants. I have a plunker here. Of my close attempt. I was thinking something like this:
$scope.order = function(predicate, reverse) {
$scope.recentalerts = orderBy($scope.recentalerts, predicate, reverse);
};
like from the angular website might work, but am having a bit of trouble integrating it into my own table. What am I doing wrong? Or is there an easier way to do so? I'd like to just stick with plain angular like this example.
Your example is working (after fixing the plunkR), however you always force reverse to false.
If you want to reproduce what Angular do, which is inverse the reverse parameter on each click, you could for instance add somehting like this:
$scope.orders[predicate] = !$scope.orders[predicate];
$scope.recentalerts = orderBy($scope.recentalerts, predicate, $scope.orders[predicate]);
See working plunkr:
http://plnkr.co/edit/Z9LDlWvwWV82D65pfiF6?p=preview
Or in a simpler form, use a common $scope.reverse attribute:
http://plnkr.co/edit/sMD7ZqmsJ7bULa26jo6q?p=preview
Here's a snippet of what I use for rolling my own sorting in tables. Simply using a string to determine what property I want to sort by (with reverse supported) and changing it dynamically, then using orderBy on the ng-repeat.
Hope this helps.
angular.module('app', [])
.controller('testCtrl', ['$scope',
function($scope) {
$scope.sortBy = 'ID';
$scope.sort = function(sortBy) {
if ($scope.sortBy == sortBy) {
$scope.sortBy = '-' + sortBy
} else {
$scope.sortBy = sortBy;
}
}
$scope.people = [{
'ID': 1,
'Name': 'Aaron',
'Age': 70
}, {
'ID': 28,
'Name': 'Ben',
'Age': 60
}, {
'ID': 2,
'Name': 'Claire',
'Age': 50
}, {
'ID': 14,
'Name': 'Damian',
'Age': 40
}, {
'ID': 8,
'Name': 'Frank',
'Age': 30
}];
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
<div id="wrapper">
<div style="margin: 1em">
<h4>Recent Alerts</h4>
<div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th ng-click="sort('ID')">ID
<i class="fa fa-caret-down" ng-show="sortBy=='-ID'"></i>
<i class="fa fa-caret-up" ng-show="sortBy=='ID'"></i>
</th>
<th ng-click="sort('Name')">Name
<i class="fa fa-caret-down" ng-show="sortBy=='-Name'"></i>
<i class="fa fa-caret-up" ng-show="sortBy=='Name'"></i>
</th>
<th ng-click="sort('Age')">Age
<i class="fa fa-caret-down" ng-show="sortBy=='-Age'"></i>
<i class="fa fa-caret-up" ng-show="sortBy=='Age'"></i>
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="person in people | orderBy: sortBy">
<td ng-bind="person.ID"></td>
<td ng-bind="person.Name"></td>
<td ng-bind="person.Age"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
</div>
</body>
</html>
Below code displays data within an ng-repeat . I'm attempting to include a new line after every 5 elements are displayed :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var json = {
"modules":
[
{
"category":"Sport",
"title":"Sport New Title",
"description" : "Sport This is description",
"fullDescription" : "fullDescription Sport This is description",
"hrefLink" : "http://www.google.com",
"hrefTitle" : "Google",
"dateAdded" : "11-11-11"
},
{
"category":"News",
"title":"Scala New Title",
"description" : "Scala This is description",
"fullDescription" : "fullDescription Sport This is description",
"hrefLink" : "http://www.google.com",
"hrefTitle" : "Google",
"dateAdded" : "11-11-11"
},
{
"category":"Scala",
"title":"Scala New Title",
"description" : "Scala This is description",
"fullDescription" : "fullDescription Sport This is description",
"hrefLink" : "http://www.google.com",
"hrefTitle" : "Google",
"dateAdded" : "11-11-11"
}
]
};
$scope.ocw = json;
});
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="app.js"></script>
</head>
Search: <input ng-model="searchText">
<body ng-controller="MainCtrl">
<table class="table table-bordered" ng-repeat="module in ocw.modules | filter:searchText">
<td>
<h3 class="moduletitle">{{ module.category }} {{$index}}</h3>
<p>{{ module.title }}</p>
<p>{{ module.description }}</p>
<p> {{ module.hrefTitle }}</p>
</td>
<div ng-if={{$index}}" % 5 === 0">
<tr></tr>
</div>
</div>
</table>
</body>
</html>
But problem is <td> elements are wrapped by <tr> . This appears to be generated by ng-repeat. Can these td elements be displayed on one row and separated every 5 elements ?
Plunkr : http://plnkr.co/edit/MnSD7u1pCKV7kTQkGFPT?p=preview
Try this : http://plnkr.co/edit/D7XyPDM8uJzArqcaWtJf?p=preview
First, you divide your actual JSON into rows by using a chunk methods (as seen here )
function chunk(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
return newArr;
}
json.modules = chunk(json.modules, 5);
Then in your HTML use two ng-repeat. One in the TR for the rows and one in the TD for each element of the row :
<table class="table table-bordered">
<tr ng-repeat="(rowIndex, row)in ocw.modules">
<td ng-repeat="module in row | filter:searchText">
<h3 class="moduletitle">{{ module.category }} {{$index+(rowIndex*5)}}</h3>
<p>{{ module.title }}</p>
<p>{{ module.description }}</p>
<p> {{ module.hrefTitle }}</p>
</td>
</tr>
</table>
The answer by m59 that I have linked also shows how to rejoin your data if you need to use it "unchucked".