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...
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...
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...
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...
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...
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,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: '@' }, ...
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...
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)...
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...
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 ...
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...
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"> ...
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())...
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...
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 :-)...
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...
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."...
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...
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...
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...
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...
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>...
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...
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...
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...
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 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; } ...
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...
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...
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...
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)...
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....
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>...
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,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...
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...
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())); }); ...
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...
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 ......
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
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...
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...