Is there a table component in Angular Material?
angularjs,material-design,ngtable,angular-material
If you are always interested about a kind of <md-table>, I made it on Codepen, and could be added in future version of angular material : http://codepen.io/jbltx/details/WbdRRb
NgTable get total of data
For getting the current length of the data you need to put data in some scope variable so that it would easily accessible on HTML, currently you have stored data in var data so you need to do $scope.data = data & on UI you need to use interpolation directive...
How to trigger export to csv for a table data from a different template in angularjs?
The anchor tag in your plunkr is missing ng-href="{{ csv.link() }}, which is what causes the browser to download the csv as a file. If you must use a button instead of an anchor tag, you can simulate href with a function that calls csv.generate, and then sets location.href to...
How to filter and sort array elements in ngtable?
The problem with your code is that your array of data only contains strings instead of objects, so it's filtering based only on the first character when you have sortable="valueOf()[0]" The solution is to use objects instead. Here is the relevant code that needs to be updated: HTML <td ......
can a placeholder be set on the input in an ng-table?
You can edit ng-table.js Unminify ng-table.js (ie: http://jsbeautifier.org/) and after that in line 250 you can find <input type="text" ng-model="params.filter()[name]" ng-if="filter==\'text\'" ,class="input-filter form-control"/> add placeholder there ie : <input type="text" ng-model="params.filter()[name]" ng-if="filter==\'text\'" placeholder="input {{name}}",class="input-filter form-control"/> Please see here for working demo : http://plnkr.co/edit/q0CMCb7evmZh1sflVV5f?p=preview...
how to display tooltip in ngtable?
You just need a slight change: http://plnkr.co/edit/eP5fiFrWvcoVveYWAQzr?p=preview var text = attrs['qtipContent']; var title = attrs['qtipTitle']; Here is the entire directive: app.directive("myQtip", function () { return function (scope, element, attrs) { /******* This is what's different from myQtip *********/ var text = attrs['qtipContent']; var title = attrs['qtipTitle']; /******************************************************/ scope.qtipSkin = (attrs.skin...
angularjs pagination: Unknown provider: ngTableParamsProvider
My advice to you is always to initialize the ng-table in $http.get. It must be like: $http.get('../admin/users/angular_all_users').success(function (data) { $scope.tableParams = new ngTableParams({ page: 1, count: 10 }, { total: data.length, getData: function ($defer, params) { // use build-in angular filter for ordering var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy())...
ng-table cannot change column value
You're actually displaying the models value via the html "value" attribute. To change the model itself, you have make use of the ngModel directive. To keep save and cancel functionality, I'd advise to make a working copy in $scope.edit using angular.copy() of the model p and save it back after...
How to refresh NG-Table loaded from an http request with dynamic data
The solution to the issue can be found here. It's not a good solution but for now it's the best. By forcing a different count for each request the table will reload it's data and you will obtain the desired result. The new Plunk can be found here Please note...
angularJS: sorting table with ngTable not working
Angular ng-table dynamic headers doesn't work inside as the answer there says "Define a template for a header, and set a template-header attribute of ng-table."...
AngularJS ngTable not updated
I was having the same issue. You need to reload $scope.tableParams every time a new search occurs, so every time the search button is clicked. A simple way to do this is to wrap $scope.tableParams.reload() in a function, and then call that function when your search button is clicked. controller...
How do I turn setting a property on ngTable into a promise?
Try var promise = $q.when($scope.productsTable.params.page(page)) if(promise.then) promise.all(function(){//do staff}) else //do staff without promise In your case, page method don't return any promise from source code just returs params object or factory. By using promise.all Combines multiple promises into a single promise that is resolved when all of the input promises...
How to sort and filter ngTable date (milliseconds) data?
Date Sorting This is not an issue of the ngTable but how the underlying angular filter for 'OrderBy' works. Just use valueOf()[0], valueOf()[1] respectively where 0 & 1 are the indexes for your inner array. Here is the html and there is no need to change your getData callback. <table...
How to add multiple ajax request in Angularjs single controller
angularjs,angularjs-ng-repeat,ngtable
You would typically just make two separate requests, populating the $scope object as result callbacks are triggered. The view will refresh automatically. If you don't want the view to refresh until all of the ajax requests are complete, then chain together some promises with $q.all. See https://docs.angularjs.org/api/ng/service/$q for more details...
Angularjs: bracket missing in attribute
angularjs,angularjs-directive,ngtable
You're trying to do a 2-way binding (param : "=") to what's written in param, but that is not an object or a variable, it's an expression. Either lose the {{}} or change your scope.param binding to be to a string: scope: { param: '@' }, ...
ngTable nested fields
working with sort and filter,ngtable 0.3.1 - plunk <table ng-table="tableParams" show-filter="true" class="table"> <tr class='listing' ng-repeat="invoice in $data"> <td data-title="'Invoice No.'" sortable="'no'" filter="{'no':'text'}"> {{invoice.no}} </td> <td data-title="'Date'" sortable="'date'" filter="{'date':'text'}"> {{invoice.date}} </td> <td data-title="'Client'" sortable="'client.fullname'" filter="{'client':'text'}"> {{invoice.client.fullname}} </td> </tr>...
Why ng-table get data api request sent two times?
It's probably one of the following: 1) Your entire controller is being executed twice. 2) You aren't actually sending out 2 GET requests. If you are doing CORS requests an OPTIONS request will be sent before the GET request is sent....
ngTable reload function not updating table
You are defining var data = []; instead or $scope.data = []; Which means that $scope.data does not exist, causing the exception you showed. To solve it it's necessary to replace all references to data to local scope and replace by $scope.data. Angular $scope only use the variables assigned to...
How to set dynamic data-title in ngtable (angular plugin)
I' ve finally found how do this, with this example : https://github.com/esvit/ng-table/issues/53 <td data-title="translate['reference']" > {{product.reference}} </td> where translate is the scope variable and ['reference'] is the property ...
Ng-table change page action on second click (not on first)
javascript,angularjs,breeze,ngtable
As stated in Mohebifar's and Wards's comments above you do not need to use angulars timeout service in this. The $defer param though is something that is passed to the "getdata" callback from the ngTable directive itself (actualy is the a $q.defer() result created internaly by ngTable). Then the deferred...
ngtable : sort and filter on nested object
Unfortunately, the filtering and sorting with nested objects is not suitable in ng-table for now. Reading this post and solution from @Kostia Mololkin, I finally got it how to avoid this bug and the solution is in the end very simple. Big thanks to him! I just rewrote the array...
How to dynamically re-draw data in table. Angular ngTable
There is a provided method to do just that: $scope.tableParams.reload(); Just call it after you update the data the table is displaying. Edit: First off, I think your current use of ngTable is incorrect. Instead of tying the table directly to the response data, I think the best thing to...
Angularjs ng-table with AJAX data souce, sorting and filtering
angularjs,angularjs-directive,ngtable
Hi Almaron (aka Malkav) I'm wafflejock from the IRC here's the thing working as best I could get it: http://plnkr.co/edit/TUOYmM?p=preview var app = angular.module('main', ['ngTable']). controller('DemoCtrl', function($scope, ngTableParams, NameService) { var data = NameService.data; $scope.tableParams = new ngTableParams( { page: 1, // show first page count: 10, // count per...
Ng-Table ng-repeat on nested values
There seems to be at least two ways you could accomplish this. The first might be more simple but skirts the question you posed. Massage the list[] into a flattened and simplified array tailored for this table's view. You would then ng-repeat over that array. That is really a dodge...
How to use ngTable pagination with Firebase Array
javascript,angularjs,pagination,firebase,ngtable
Try repeating over $data instead of $scope.laundryData: <table ng-table="tableParams" class="table"> <tr ng-repeat="laundry in $data | orderBy:'-$id'"> <td data-title="'Date'">{{laundry.date}}</td> <td data-title="'User'">{{laundry.user}}</td> <td data-title="'Loads'">{{laundry.loads || '-'}}</td> <td data-title="'Refill'">{{(laundry.refill | currency) || '-'}}</td> <td data-title="'Cost'">{{(laundry.cost | currency) || '-'}}</td> <td...
ng-table sorting of concatenated values from scope
javascript,angularjs,angularjs-directive,angularjs-ng-repeat,ngtable
Utimately, I solved the filtering by using a simple filter (shown below). that adds the value person.fullName to the current object collection used in ng-repeat by the table $scope.getFullName = function(person) { return person.fullName = person.name + ' ' + person.lastName; } and referencing it in the ngTable's ng-repeat <tr...
Angular ng-repeat dependent on prior ng-repeat
angularjs,angularjs-ng-repeat,ngtable,angular-filters
ng-hide="subuser.MainCategory !== user.index_id" Plunker: http://plnkr.co/edit/NWL3K7ZMr6qgd9MFWG3N?p=preview I hope this is what you're looking for. I'm not exactly sure what you're trying to accomplish with all of your code, but this will hide any items that are not a subcategory of the item they're nested within. If you have options to change...
How to split data into multiple columns of ngtable?
First of all I would try to map my string array to an object array before binding to the ngTable That would feel more natural to the ngTable. Something like this ["string A", "string B"] would map to [ { index: '0', text: 'string A'}, { index: '1', text: 'string...
AngularJS: $defer.resolve() not binding data to table
I finally figured out what was going wrong. <table id="users" class="dashboard-widget msbf-table" ng-table="usersTableParams" hide-pagination="false" show-filter="true"> <tr ng-repeat = "user in users" ng-click="usersClicked($event, user.userId);"> .... </tr> </table> The ng-repeat = "user in users" should be replaced with ng-repeat = "user in $data" if you are using getData in ngTableParams to customize...
ng-table not working for dynamic data
It is a problem with the ngTable directive. It updates only when data.length changes. Take a look at this plunk. I set $scope['tableParams1'] to null and inside the $timeout I set the new data. This forces angularJs to do a new cycle. So in the first cycle the ngTable sees...
How to bind title attribute value in ng-table
I think you can use the ng-attr-title for that, so basicly your code remains the same, but just before 'title=' you add 'ng-attr-'. So your last line would like like: <td data-title="'Remarks'" sortable="'remarks'" ng-attr-title="{{doc.remarks}}"> I haven't tested this on table cells before, but theoretically it should do the trick :-)...
limit the character to 10 for filter text-field - ngTable
You can't do that easily with the directives provided by ng-table. In order to achieve that, you must create your own input filterer, apply it on the ng-repeat and use a simple directive which will limit the caracteres of the input field. Here is a working example, hope it will...
Angular ng-table sorting not working in fixed header
I think your problem comes from your sorting configuration : sorting: { name: 'asc' // initial sorting } You seem not to have a name parameter in one of your table column (value1, value2, ... unless you didn't show us your real code) If you want to sort your first...
ngTable tableParams count vlue being ignored
I had similar issues with ngTable pagination and for those with the same problem the fix is to reference the ngTable $data scope within the ng-repeat directive (regardless of where/how you store the table data). i.e. <tr ng-repeat="item in $data"> It appears that $defer.resolve() will assign table data (i.e. selectedItems)...
Angularjs ng-attr-title not working in chrome browser
It seems we have discuss it in other Question Here. Use Div there for resolving this issue. I have Edited your HTML BLOCK: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <script src="https://code.angularjs.org/1.2.9/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>...
unable to refresh ng-table after $http call.
i was able to fix my Add and update simply by updating my add and Update fictions. In the case of add i am pushing the newly added object into $scope.data after successful server call to Add, and then calling $scope.tableParams.reload(); In the case of update i am finding the...
Pagination controls not showing up in ng-table when fetching data from backend
This happens because the usual $scope.tableParams.reload() function used to refresh the data after an asynchronous data load does not refresh the total item count in the table. It didn't happen before because this value is correctly set at the beginning when you were using dummy data. You need to add...
How to use ngResource with ngtable select box filtering
ngResource immediately returns an object. For query it is actually an empty array with a promise attached ($promise). Your getData function is building the table with an empty array. There are many ways to solve this, but one simple thing is just to call reload on the table params (which...
Set all select elements in a table to the same width as the widest one in its column
I guess this can be done with a simple CSS directive. select { display: block; width: 100%; } If not, then maybe this version of your own code : $scope.resizeInputs = function(table, inputType) { var cols = [], rows = table + " tbody tr"; $(rows).each(function(i, tr) { $(tr).find('td').each(function(i, td)...
Bind row to a URI using ngTable or similar?
How about adding an ng-click into your row like this ng-click="goto(user.name)" And creating some function in your controller like this var base_uri = "http://sacredgrove.com/"; $scope.goto = function(uri) { window.location = base_uri + uri; } ...
How to reload ngTable with successful Post
You should update total property as well,after recieving data,regardless of using pagination or not controller ... getData: function ($defer, params) { $http.get('/api/apiMasterItem/') .success(function (data, status) { var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; // update table params params.total(data.length); $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); }); ...
How to export whole data from a table in angularjs including all paginated data?
I found a way here by davisford I made some considerable changes -- namely, I needed to fix it to work with ng-table's pager. If the pager is enabled, the export plugin would only export a page of data. My fix is mostly a re-write, and it isn't perfect, but...
How can I use ngAnimate with ngTable?
javascript,css,angularjs,ng-animate,ngtable
The animation class should be put on the same element as the ngRepeat directive: <tr ng-repeat="user in $data" class="animate"> ...