I have a table with following data formed by response from backend . I need to give pagination dynamically and fetch first 10 records initially and when particular page is triggered need to set accordingly. I am using dirpaginate.js for pagination purpose. But I couldnt get the datas accordingly.
Html:
<table>
<tbody>
<tr dir-paginate="item in searchData|orderBy:sortkey:reverse|itemsPerPage:10">
<td class="col-sm-4">{{item[0].profileInfo.firstname}}
<br> {{item[0].profileInfo.lastname}}
<br>
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
</dir-pagination-controls>
JS:
var req = {
"request": {
"service": {
"servicetype": "3",
"sort": {
"sortby": "firstname",
"sorttype": "asc"
},
"records": {
"start_no": $scope.pagination,
}
}
}
}
$scope.sortkey = '';
$scope.reverse = false;
Related
I want to show button post only when modelCheck will change.
My code :
HTML :
<table>
<tr>
<th>name</th>
<th><button class="btn" ng-if="modelCheck === {}" ng-click="post()">post</button></th>
<th><button class="btn disabled" ng-if="modelCheck !== {}" ng-click="post()">post</button></th>
</tr>
<tr ng-repeat="x in messages">
<td>{{x.name}}</td>
<td><input type="checkbox" ng-model="modelCheck[x.name]"/></td>
</tr>
</table>
JS:
$scope.modelCheck = {};
$scope.messages =
[
{
"name": "eva",
},
{
"name": "ben",
},
];
$scope.post = function(){
var data = [];
for (var k in $scope.modelCheck) {
if ($scope.modelCheck.hasOwnProperty(k) && $scope.modelCheck[k]) {
data.push({'name': k});
}
}
console.log(data);
// do with data as you wish from here
};
Plunker:http://next.plnkr.co/edit/xQ3AGFW03qGWKyxI
My code doesn't work. Thanks for answers and help in advance!
use this condition to check the empty object
<th><button class="btn" ng-if="(modelCheck | json) != ({} | json)" ng-click="post()">post</button></th>
So, I have this table that displays users taken from a server in angularjs. Here is the users object:
'users'= [
{
"name":"Jane Doe",
"gender":"female",
"role":"admin"
},
{
"name":"John Doe",
"gender":"male",
"role":"owner"
}
]
Here is the table that displays this data:
<div class="col-md-4">
<h3>Filter by user role</h3>
<select class="form-control" ng-model="roleOrder">
<option
ng-repeat="user in users"
value="{{user.role}}">{{user.role}}</option>
</select>
</div>
<table class="table table-bordered">
<thead>
<th>Name</th>
<th>Gender</th>
<th>role</th>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:{role: roleOrder}">
<td>{{user.name}}</td>
<td>{{user.gender}}</td>
<td>{{user.role}}</td>
</tr>
</tbody>
</table>
The problem is, when the page loads, nothing gets displayed until I select a role from the dropdown to filter the users.
My goal is to have all the users displayed initially, and then to filter the users by their roles once their corresponding role is selected in the option select dropdown.
Is there a better way than the one I'm attempting? Or how do I do it right?
Thanks for any ideas
You can add function for it like here AngularJS custom filter function
In js file
$scope.predicate = function( roleOrder ) {
return function( item ) {
return !roleOrder || item.role === roleOrder;
};
};
And in html
<tr ng-repeat="user in users | filter:predicate(roleOrder)">
<td>{{user.name}}</td>
<td>{{user.gender}}</td>
<td>{{user.role}}</td>
</tr>
user data is displaying when page loads, its working fine. Can you check the below link.
http://plnkr.co/edit/FwqivguAcyLnqxKVWEC6?p=preview
$scope.users= [
{
"name":"Jane Doe",
"gender":"female",
"role":"admin"
},
{
"name":"John Doe",
"gender":"male",
"role":"owner"
}
]
Is this you expectation, it not please explain it briefly.
Check whether the data from server binds in $scope when the page loads
I have used ngInfiniteScroll but i have a small problem, i have a set of data in a variable items for eg) 20 but i want to show 5 on first view and the remaining on sliding. but my code loads all the 20 at the first view how can i achieve this, i have given my code below
and my data structure
{
"data": [ {
"name": "Hoarding Majestic",
"code": 456,
"image": "assets/images/images/hoarding1.jpg",
"location": "Majestic"
},
{
"name": "BusShelter ForumMall",
"code": 452,
"image": "assets/images/images/hoarding2.jpg",
"location": "Whitefield"
},
{
"name": "Digital Vijayanagar",
"code": 458,
"image": "assets/images/images/hoarding3.jpg",
"location": "Vijayanagar"
},
{
"name": "Digital Vijayanagar",
"code": 458,
"image": "assets/images/images/hoarding3.jpg",
"location": "Vijayanagar"
}
]
}
html:-
<div layout="row" layout-align="space-around" layout-padding infinite-scroll='loadMore()' infinite-scroll-distance='2'
infinite-scroll-disabled='{{busyLoadingData}}' infinite-scroll-container = "'#content'">
<table class="simple">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Asset</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Location</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="assets in items">
<!--| priceRange:slider:lower:upper-->
<td>{{assets.name}}</td>
<td>{{ assets.location }}</td>
</tr>
</tbody>
</table>
</div>
and my controller:-
$scope.data = booking.data;
$scope.busyLoadingData = false;
$scope.items = [];
$scope.loadMore = function() {
//console.log("asdfasdfasd");
if($scope.busyLoadingData)
return;
$scope.busyLoadingData = true;
var last = $scope.data[$scope.data.length - 1];
for(var i = 0 ; i <= 5; i++) {
$scope.items.push($scope.data[i]);
//console.log(last);
}
$timeout(function(){$scope.busyLoadingData = false; }, 3000 );
};
Like any infinite scrolling element should do, ng-infinite-scroll is loading more data, than it can display at once. This is to prevent having to less data and having the user reach the bottom even if there is some data left. You can clearly see the effect in this demo. It will start loading data, even if there is still some space left to the bottom of the page.
I'm relatively new to Angular and got stuck with something ....
I'm trying to add a function to my controller and then to my view/html that would allow me mark a Vote <button> active/inactive based on the result of comparison of data from two different json files. Pseudo code would be something like this
if Vote exists:
display disabled vote button with a number of existing votes
else:
display active vote button (with a number of existing votes) and then disable it after vote has been submitted
that function would be checking if link.id list exists in users's vote.link/id list
link json example
{"description": "Lorem Ipsum", "id": 1, "resource_uri": "/api/v1/links/1/", "timestamp_added": "2015-02-15T17:22:33.300349", "url": "http://google.com/", "user": "user1"}
vote json example
{"id": 351, "resource_uri": "/api/v1/votes/351/", "timestamp_added": "2015-03-30T15:00:09.622308", "user": "user1", "vote": "up", "voted_link": "1"}
controller.js
app.controller('LinksCtrl', function ($scope, $http){
$http.get('http://localhost:8001/api/v1/links/?limit=0').
success(function(data) {
console.log('http.get OK');
$scope.links = data;
});
$http.get('http://localhost:8001/api/v1/votes/?limit=0').
success(function(data) {
console.log('http.get OK');
$scope.votes = data;
});
$scope.sortField = 'objects.likes';
$scope.reverse = true;
<!-- ############# LOOKING FOR HELP WITH THIS FUNCTION ###########
$scope.isDisabled = function (link_id) {
return "true if link_id is present in the list of link IDs from the votes array" );
};
-->
$scope.voteUp = function(id){
$http.post('http://localhost:8001/api/v1/votes/', {
user: "user1",
voted_link: "1",
vote: "up"
}).
success(function(data, status, headers, config) {
console.log('http.post OK');
}).
error(function(data, status, headers, config) {
console.log('http.post NOK');
});
};
});
view.html
<div ng-controller="LinksCtrl">
<tr ng-repeat="link in links.objects">
<td>{{ link.url }}</td>
<td>{{ link.description }}</td>
<td><button
ng-disabled="isDisabled(link.id)"
ng-click="voteUp(link.id)"
>Vote
</button></td>
</tr>
</div>
Code also here: https://jsfiddle.net/v6hkz9rr/7/.
Any ideas how should I be going about it?
thanks
-s
I modified your example to match your request. check this out
i replaced $http calls with static data for the demo
js
var app = angular.module('plunker', []);
app.controller('LinksCtrl', function($scope) {
$scope.links = {
objects: [{
id: 1,
url: 'https://facebook.com',
description: 'facebook the social network',
votes: 4
}, {
id: 2,
url: 'https://google.com',
description: 'google inc',
votes: 10
}]
};
$scope.votes = [];
/*-- ############# LOOKING FOR HELP WITH THIS FUNCTION ########### */
$scope.isDisabled = function(link) {
return $scope.votes.indexOf(link.id) >= 0;
};
$scope.voteUp = function(link) {
link.votes++;
$scope.votes.push(link.id);
}
});
html
<body ng-controller="LinksCtrl">
<div class="container">
<h4>Links</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>
url
</th>
<th>
description
</th>
<th>
#
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="link in links.objects">
<td>{{ link.url }}</td>
<td>{{ link.description }}</td>
<td>
<button class="btn btn-xs btn-default" ng-disabled="isDisabled(link)" ng-click="voteUp(link)">Vote ({{link.votes}})</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
http://plnkr.co/edit/xPEnB4inzZxVUBsWpaw1?p=preview
I have a dynamic dataset to present with Angular. In other words I do not have access to the column names returned until runtime.
I can present the column names as a header and the data itself with no problem. ng-repeat (or perhaps it's JS itself) though refuses to return the columns in the order they were created. You can see in the fiddle the columns are sorted so they appear "age name weight", I need them the way they came, "name age weight"
I created another array of the column names and their proper order ($scope.order) but I cannot seem to find a way to use that with Angular to sort the data.
Please give me a way to present this data in the original order.
I created a JSFiddle: http://jsfiddle.net/GE7SW/
Here's a simple scope that sets up the data:
function MainCtrl($scope) {
$scope.output = [
{
"name": "Tom",
"age": "25",
"weight" : 250
},
{
"name": "Allan",
"age": "28",
"weight" : 175
},
{
"name": "Sally",
"age": "35",
"weight" : 150
}
];
$scope.order = {
"name": 1,
"age": 2,
"weight" : 3
};
}
Here's the HTML:
<table ng-app ng-controller="MainCtrl">
<thead>
<tr>
<th ng-repeat="(key,value) in output.0">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in output">
<td ng-repeat="(key,value) in row">{{value}}</td>
</tr>
</tbody>
</table>
(Note the (key,value) in the last ng-repeat is needed by ng-class code I took out for this example.)
The properties order in JavaScript objects is never guaranteed. You need to use a list.
The only thing you need to do is convert $scope.order into an array:
$scope.order = [
"name",
"age",
"weight"
];
and use that inside the HTML like this:
<table ng-app ng-controller="MainCtrl">
<thead>
<tr>
<th ng-repeat="key in order">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in output">
<td ng-repeat="key in order">{{row[key]}}</td>
</tr>
</tbody>
</table>
Fiddle
Your updated fiddle here (click).
While the order of javascript objects is not guaranteed, this is likely to work in most or all cases. This is simply looping your objects into arrays. It might be a better approach, if possible, to have the data coming from the server in arrays, 1 that describes the structure (keys) and the other that just data sets of arrays.
$scope.getRow = function(row) {
var arr = [];
for (var k in row) {
if (k !== '$$hashKey') {
arr.push(row[k]);
}
}
return arr;
};
$scope.getKeys = function(row) {
var arr = [];
for (var k in row) {
if (k !== '$$hashKey') {
arr.push(k);
}
}
return arr;
};
the html:
<table ng-app ng-controller="MainCtrl">
<thead>
<tr>
<th ng-repeat="(key,value) in getKeys(output[0])">{{value}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in output">
<td ng-repeat="(key, value) in getRow(row)" ng-class="getKeys(output[0])[key]">{{value}}</td>
</tr>
</tbody>
</table>