I am trying to implement the example shown in the official ng-table homepage here as is.
So I copied and pasted to my project and it fails to show any data like below:
My HTML code is a partial html, loaded with ngRouter:
<section class="content">
<h2>TABLE</h2>
<div ng-controller="TableCtrl">
<p><strong>page:</strong>{{tableParams.page()}}</p>
<p><strong>count per page:</strong>{{tabelParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr tr-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</div>
</section>
My JS file is:
var app = angular.module('pean', ['ngRoute', 'ngTable'])
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'partials/home'
}).
when('/test', {
templateUrl: 'partials/test',
controller:'TableCtrl'
}).
Url: 'partials/read'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
app.controller('TableCtrl', function($scope, ngTableParams){
var data = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.tableParams = new ngTableParams({
page:1,
count:10
},{
total:data.length,
getData:function($defer, params){
$defer.resolve(data.slice((params.page() -1) * params.count(), params.page() * params.count()));
}
});
});
There isn't any error message on my chrome consol. So I don't see any reason why this is not working.
you are having tr-repeat="user in $data"instead of
ng-repeat="user in $data"
in your code.
try to add your data as
$scope.data = [...]
instead of
var data = [...]
in your controller and refer it as
ng-repeat="user in data"
in your HTML
Hope this helps!
Related
I was trying this ngTable example of filtering columns using select values.
HTML code (table part)
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'select'}" filter-data="names" sortable="'name'">{{ row.name }}</td>
<td data-title="'Age'" filter="{age: 'text'}" sortable="'age'">{{ row.age }}</td>
</tr>
</tbody>
</table>
Javascript code
var app = angular.module('ngTableApp', ['ngTable'])
.controller('selectFilterController', function($scope, $filter, $q, NgTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.names = ['Moroni', 'Enos', 'Nephi'];
$scope.tableParams = new NgTableParams({page: 1, count: 10}, {dataset: data});
})
When I run this code plunker, the select values for column 'Name' are blank.
The example says
The select filter will fetch its data by calling the fetchData function defined for the column.
But, there is no fetchData function called in the code in that example. I am confused as what is the issue here?
From example I figured out that the format used by ng-table for filter-data attribute in HTML(for select values) is array of objects in the following form.
$scope.names = [{id: "", title: ""}, {id: 'Moroni', title: 'Moroni'}, {id: 'Enos', title: 'Enos'}, {id: 'Nephi', title: 'Nephi'}];
Updated plunker.
Should be written like:
$scope.names = [{"id": "", "title": ""}, {"id": "Moroni", "title": "Moroni"}];
On the page fiddle I have a grid.
In $scope.myItems I have my data.
I want observe the data. After I type in the name field "Enos", I want to get only records which contain that string ("Enos").
The grid works, but I want to print the data using console log, because after filtering data I want to pass the data to another function.
I tried use $scope.watch but it's not working.
.module('myApp', ['trNgGrid'])
.controller("MainCtrl", ["$scope", function ($scope) {
$scope.myItems = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 99}];
$scope.$watch('myItems', function(newValue) {
console.log(newValue); });
}]);
When I type sth to field console log isn't working.
Answer can be found from documentation http://moonstorm.github.io/trNgGrid/release/#/GlobalOptions
<table tr-ng-grid items="myItems" filtered-items="myFilteredItems"></table>
$scope.myFilteredItems = [];
$scope.$watchCollection('myFilteredItems', function(items){
console.log(angular.toJson(items));
});
I use ng-table component
In my bower.json:
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
...
"ng-table": "~0.3.3"
}
}
In my index.html:
<!doctype html>
<html lang="fr" ng-app="test" ng-controller="TitleCtrl">
<head>
...
<script src="bower_components/ng-table/ng-table.js"></script>
<link rel="stylesheet" href="bower_components/ng-table/ng-table.css"/>
...
</head>
<body>
<ng-include src="'menu/menu.html'"></ng-include>
<div ng-view style="padding-left: 20px;padding-right: 20px;"></div>
</body>
</html>
In my table.html:
<form class="form-horizontal narrow" role="form">
<div ng-controller="PropertiesCtrl">
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</div>
</form>
In my properties.js:
var propertiesModule = angular.module('test.properties', ['ngTable']);
propertiesModule.controller('PropertiesCtrl', ['$scope', '$routeParams', 'PropertiesService', 'ApplicationService', 'PlatformService', 'Page', '$filter', 'ngTableParams', function ($scope, $routeParams, PropertiesService, ApplicationService, PlatformService, Page, $filter, ngTableParams) {
...
$scope.on_edit_unit = function () {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
console.log( data);
console.log( $scope.tableParams);
});
};
...
When I log in the console $scope.tableParams:
ngTableParams {data: Array[0], parameters: function, settings:
function, page: function, total: function…}
Why there is no data in my ngTableParams?
UPDATE init a PLUNKER:
PLUNKER
Someone can explain this example
Plunker NG-Table
In the HTML, there is -->
<tbody ng-repeat="group in $groups">
But in the js there is no why ?
$groups
The ngTable module defines the $scope.$groups when the groupBy ngTableParameter is specified (you can see it in the github source code here ).
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
groupBy: 'role', // << ----- grouping parameter
total: data.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')(data, $scope.tableParams.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
This is the $groups created on the $scope by ngTable, for the data in the plunker example.
$scope.$groups = [
{
value: 'Administrator',
data: [
{name: "Moroni", age: 50, role: 'Administrator'},
{name: "Tiancum", age: 43, role: 'Administrator'},
{name: "Jacob", age: 27, role: 'Administrator'}
]
},
{
value: 'Moderator',
data: [
{name: "Nephi", age: 29, role: 'Moderator'},
{name: "Nephi", age: 29, role: 'Moderator'},
{name: "Tiancum", age: 43, role: 'Moderator'},
{name: "Enos", age: 34, role: 'Moderator'}
]
},
{
value: 'User',
data: [
{name: "Enos", age: 34, role: 'User'},
{name: "Tiancum", age: 43, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Enos", age: 34, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Nephi", age: 29, role: 'User'},
{name: "Tiancum", age: 43, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Nephi", age: 29, role: 'User'},
{name: "Enos", age: 34, role: 'User'}
]
}
]
Can any one tell me why me popup is not working? I have used table sorter in Angularjs, but when the link is clicked on the popup is not getting displayed.
Test1.html
<div ng-controller="DemoCtrl">
<table ng-table="tableParams" class="table table-striped
table-condensed table-hover" border ="1">
<tr ng-repeat="user in $data">
<td data-title="'Event Id'" sortable="'event_id'">
<div ng-contorller="MyCtrl">
<a href="#" ng-click='toggleModal()'>{{user.name}} </a>
<modal-dialog show='modalShown' width='400px' height='60%'>
<p>Modal Content Goes here</p>
</modal-dialog>
</div>
</td>
<td data-title="'Event Date & Time'" sortable="'event_date'">
{{user.age}}
</td>
<td data-title="'Event Type'" sortable="'event_type'">
{{user.age}}
</td>
<td data-title="'Serverity'" sortable="'serverity'">
{{user.age}}
</td>
<td data-title="'Device Name'" sortable="'device_name'">
{{user.age}}
</td>
<td data-title="'User Name'" sortable="'user_name'">
{{user.age}}
</td>
<td data-title="'Mail Sent Time'" sortable="'mail_sent'">
{{user.age}}
</td>
<td data-title="'Mail Status'" sortable="'mail_status'">
{{user.age}}
</td>
<td data-title="'Remarks'" sortable="'remarks'">
{{user.age}}
</td>
</tr>
</table>
</div>
</div>
script.js
var app = angular.module('main', ['ngTable']);
app.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
app.controller('DemoCtrl', function($scope, $filter, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1)
* params.count(), params.page() * params.count()));
}
});
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
alert(1);
$scope.modalShown = !$scope.modalShown;
};
}]);