Menu
  • HOME
  • TAGS

NgTable get total of data

angularjs,ngtable

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 do I turn setting a property on ngTable into a promise?

javascript,angularjs,ngtable

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...

Pagination controls not showing up in ng-table when fetching data from backend

angularjs,pagination,ngtable

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 refresh NG-Table loaded from an http request with dynamic data

angularjs,http,ngtable

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: $defer.resolve() not binding data to table

angularjs,deferred,ngtable

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...

can a placeholder be set on the input in an ng-table?

angularjs,ngtable

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...

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: '@' }, ...

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...

ngTable tableParams count vlue being ignored

javascript,angularjs,ngtable

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)...

How to split data into multiple columns of ngtable?

angularjs,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...

How to set dynamic data-title in ngtable (angular plugin)

angularjs,angular-ui,ngtable

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 ...

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...

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"> ...

angularjs pagination: Unknown provider: ngTableParamsProvider

angularjs,pagination,ngtable

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())...

unable to refresh ng-table after $http call.

angularjs,ngtable

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...

How to bind title attribute value in ng-table

angularjs,ngtable

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 :-)...

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...

angularJS: sorting table with ngTable not working

javascript,angularjs,ngtable

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."...

How to dynamically re-draw data in table. Angular ngTable

angularjs,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...

How to trigger export to csv for a table data from a different template in angularjs?

angularjs,ngtable

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...

AngularJS ngTable not updated

angularjs,mongodb,ngtable

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...

limit the character to 10 for filter text-field - ngTable

angularjs,filter,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...

ngTable nested fields

angularjs,ngtable

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>...

ngtable : sort and filter on nested object

angularjs,ngtable

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...

ng-table cannot change column value

angularjs,ngtable

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...

Angular ng-table sorting not working in fixed header

angularjs,ngtable

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...

ng-table not working for dynamic data

javascript,angularjs,ngtable

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...

Bind row to a URI using ngTable or similar?

javascript,angularjs,ngtable

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 export whole data from a table in angularjs including all paginated data?

angularjs,ngtable,plunker

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 to display tooltip in ngtable?

angularjs,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...

ngTable reload function not updating table

angularjs,ngtable

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...

Set all select elements in a table to the same width as the widest one in its column

jquery,angularjs,ngtable

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)...

Why ng-table get data api request sent two times?

angularjs,ngtable

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....

Angularjs ng-attr-title not working in chrome browser

angularjs,ngtable

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>...

How to sort and filter ngTable date (milliseconds) data?

angularjs,ngtable

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...

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 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...

How to reload ngTable with successful Post

angularjs,ngtable

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 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...

How to filter and sort array elements in ngtable?

angularjs,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 ......

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

How to use ngResource with ngtable select box filtering

angularjs,ngtable

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...

Ng-Table ng-repeat on nested values

javascript,angularjs,ngtable

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...