Sorting object in angularjs whilst paginating - javascript

I have data coming from a server that I want to display. This data is being paginated and also sorted. The relevant part of the controller is as follows:
appControllers.controller('PostsCtrl',
['$scope', 'Restangular', 'messageCenterService',
'$location', '$anchorScroll',
'$filter',
function ($scope, Restangular, messageCenterService,
$location, $anchorScroll, $filter) {
// Get all posts from server.
var allPosts = Restangular.all('api/posts');
allPosts.getList().then(function (posts) {
$scope.posts = posts;
$scope.predicate = 'rank';
$scope.reverse = false;
$scope.itemsPerPage = 10;
$scope.currentPage = 1;
$scope.totalItems = $scope.posts.length;
$scope.pageCount = function () {
return Math.ceil($scope.totalItems / $scope.itemsPerPage);
};
$scope.$watch('currentPage + itemsPerPage',
function () {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.position = (10 * ($scope.currentPage - 1));
$scope.filteredPosts = $scope.posts.slice(begin, end);
$location.hash('top');
// call $anchorScroll()
$anchorScroll();
});
});
Here is the html:
<li class="list-group-item" ng-repeat="post in filteredPosts | orderBy:predicate:reverse">
<div class="row-fluid">
<div class="col-sm-1 ">
<p style="margin-top: 1em">{{($index + 1) + position}}.</p>
</div>
<div class="col-sm-1 v-center">
<i class="fa fa-angle-up"></i> <br />
<small>{{post.votes}}votes</small> <br />
<i class="fa fa-angle-down"></i>
</div>
<div class="col-sm-8">
<h4><a href={{post.url}}>{{post.title}}</a></h4>
<div>
<ul class="list-inline">
<li ng-repeat="tag in post.tags">
<span class="fa fa-tag"></span>
<button ng-click="getTags(tag.id)">{{tag.name}}</button>
</li>
</ul>
<div>
<em>{{ post.created_at | timeAgo}}</em>
by <cite>{{post.author.username}}</cite>
</div>
<div>
<a href ng-click="select(post)">
<span class="fa-stack fa-2x">
<i class="fa fa-comment fa-stack-2x"></i>
<strong class="fa-stack-1x fa-stack-text fa-inverse">
{{post.comments.length}}
</strong>
</span>
</a>
</div>
</div>
<div class="panel" ng-show="isSelected(post)">
<ul class="nav nav-list" ng-repeat="comment in post.comments">
<li class="list-group-item">
<strong><cite>{{comment.author.username}}</cite></strong>
{{comment.updated_at | timeAgo }}
<p>{{comment.message}}</p>
</li>
</ul>
<form name="CommentForm" novalidate role="form" ng-if="user.isLoggedIn" ng-submit="CommentForm.$valid && comment(post)">
<label for="InputComment">Add a Comment</label>
<textarea ng-model="newComment.message" class="form-control" id="InputComment" rows="3" required></textarea>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</li>
<pagination total-items="totalItems" items-per-page="itemsPerPage"
ng-model="currentPage" ng-change="pageChanged()"></pagination>
I need some help with figuring out how to filter the order in which the data is displayed on the page. I have read other questions which ask about sorting but I did not see any where the content is also paginated with angularjs. The question I have is how do I do a live filter considering that I have objects coming back from the server and the content is then paginated?

You could create a paging filter, and combine it with orderBy to simulate filteredPosts.
app.filter('page', function () {
return function (input, start, end) {
return input.slice(start, end);
};
});
Then you can apply both filters in your template.
ng-repeat="post in posts | orderBy:predicate:reverse | page:begin:end"

You can use the orderBy filter also programmatically to sort your array
$scope.posts = posts;
$scope.posts=$filter('orderBy')($scope.posts,'rank',false );
$scope.itemsPerPage = 10;
...
$filter u have already as a dependency in your controller

Related

AngularJS / AngularFire - Pass Objects with ng-click

I have a modal (bootstrap) where I load Objects from the Firebase Database. Now I added a ng-Click to "select" an Object.
I want to select 8 Object and "collect" them. After I collected these 8 Objects, I want to pass them to another ng-Click. When I click on the second ng-Click these 8 (selected) Objects are pushed to the Database.
Do you have any idea how to archive that? Thank you!
This is my modal:
<div class="col-md-12">
<ul class="list-group">
<li ng-repeat="team in teams" class="list-group-item">{{ team.allUserTeamName + " - " + team.allUserTeam }}
<i class="fa fa-plus-circle" aria-hidden="true" ng-init="item.isClicked = false" ng-click="selectMembers(team); item.isClicked =!item.isClicked" ng-class="{clicked : item.isClicked}"></i>
</li>
</ul>
</div>
<div class="modal-footer">
<div class="col-md-12">
<div class="row pad-team-selection-view">
<button class="btn btn-info" ng-click="createGameplanWithSelectedMembers(team)">Spielplan erstellen</button>
</div>
</div>
</div>
This is my Controller:
app.controller('modalCreateGameplanController', ['$scope', '$timeout', '$http', '$firebaseArray', '$firebaseObject', function ($scope, $timeout, $http, $firebaseObject, $firebaseArray) {
$scope.selectUsers = 'Teilnehmer';
$scope.$on('modal', function (event, args) {
var ref = firebase.database().ref("users");
var teams = $firebaseObject(ref);
teams.$loaded().then(function () {
$scope.teams = [];
angular.forEach(teams, function (key) {
$scope.teams.push({
allUserTeamName: key.firstname,
allUserTeam: key.team
});
$scope.selectMembers = function (key) {
console.log(key);
};
$scope.createGameplanWithSelectedMembers = function () {
console.log(teams);
};
});
});
});
}]);
In the view use ng-disabled and use selected length as condition to disable the button .
<div class="col-md-12">
<ul class="list-group">
<li ng-repeat="team in teams" class="list-group-item">{{ team.allUserTeamName + " - " + team.allUserTeam }}
<i class="fa fa-plus-circle" aria-hidden="true" ng-init="item.isClicked = false" ng-click="selectMembers(team); item.isClicked =!item.isClicked" ng-class="{clicked : item.isClicked}"></i>
</li>
</ul>
</div>
<div class="modal-footer">
<div class="col-md-12">
<div class="row pad-team-selection-view">
<button class="btn btn-info" ng-click="createGameplanWithSelectedMembers(team)" ng-disabled="selectCount==8">Spielplan erstellen</button>
</div>
</div>
</div>
In the controller keep a tracker for selected items $scope.selectCount
app.controller('modalCreateGameplanController', ['$scope', '$timeout', '$http', '$firebaseArray', '$firebaseObject', function ($scope, $timeout, $http, $firebaseObject, $firebaseArray) {
$scope.selectUsers = 'Teilnehmer';
$scope.$on('modal', function (event, args) {
var ref = firebase.database().ref("users");
var teams = $firebaseObject(ref);
teams.$loaded().then(function () {
$scope.selectCount=0;
$scope.teams = [];
angular.forEach(teams, function (key) {
$scope.teams.push({
allUserTeamName: key.firstname,
allUserTeam: key.team
});
$scope.selectMembers = function (key) {
$scope.selectCount=$scope.selectCount+1;
console.log(key);
};
$scope.createGameplanWithSelectedMembers = function () {
console.log(teams);
};
});
});
});
}]);

Pass a value to another controller which executes first

I have two controllers headerController, aboutController.
headerController -> To maintain the navigation and redirection
aboutController -> works when about-us page loads.
My issue is I have to update the headerController variable value when aboutController loads. i.e When about us page loads, the navigation about-us should active, similar to all the pages.
This is my code:
app.service('shareService', function () {
var data;
return {
getProperty: function () {
return data;
},
setProperty: function (value) {
data = value;
}
};
});
app.controller('headerController', function ($scope, shareService) {
$scope.navigation = [
{url: '#!/home', name: 'Home'},
{url: '#!/about-us', name: 'About Us'},
{url: '#!/services', name: 'Services'}
];
var data = shareService.getProperty();
console.log(data);
$scope.selectedIndex = 0;
$scope.itemClicked = function ($index) {
console.log($index);
$scope.selectedIndex = $index;
};
});
app.controller('aboutController', function ($scope, shareService) {
console.log('test');
$scope.selectedIndex = 1;
shareService.setProperty({navigation: $scope.selectedIndex});
});
header.html:
<header ng-controller="headerController">
<div class="header">
<div class="first-half col-md-6">
<div class="row">
<div class="logo">
<img src="assets/img/logo.png" alt=""/>
</div>
</div>
</div>
<div class="second-half col-md-6">
<div class="row">
<div class="social-share">
<ul id="social-share-header">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<nav>
<ul ng-repeat="nav in navigation">
<li class="main-nav" ng-class="{ 'active': $index == selectedIndex }"
ng-click="itemClicked($index)">
{{nav.name}}
</li>
</ul>
</nav>
</div>
</header>
index.html
This is how my template works.
<body ng-app="myApp">
<section class="first-section">
<div ng-include="'views/header.html'"></div>
</section>
<section class="second-section">
<div ng-view></div>
</section>
<section class="last-section">
<div ng-include="'views/footer.html'"></div>
</section>
</body>
Update 1: Added index.html file.
Update 2: Issue explanation: If I run directly to the about us page, then still the home navigation is on active. But it should be About us
What is you are looking for is event based communication between your controllers. This can be easily done using. $rootScope.$on, $rootScope.$emit and $rootScope.$broadcast. Since explaining all three of them in this answer will be overkill. Kindly go through this article

how to select by classname in angular from json

I am trying to get an inner value of an element by selecting through the class in angular. But for some reason it keeps giving me an error when I try to select var highlighted = angular.element(element.getElementsByClassName("btn-danger")); This is the error
angular.js:13642TypeError: angular.element.getElementsByClassName is not a function
Could it be because I am mixing angular and jquery together
the main problem is in the click controller.
it gets the value of the ul that gets loaded with the json and supposed to show on the bottom in the mouse click me(the number is just for testing)
the project is a single click keyboard that will eventually have an interval and switch keys so a disabled person can type with only one click
here is the view
<body ng-controller="mainController" ng-click="textArea = textArea + 1">
<div ng-controller="clickController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Click and Type</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-controller="intervalController">
<ul class="general_button" ng-repeat="letter in language[0].rows track by $index" ng-init="rowIndex = $index"> {{rowIndex}}
<button type="button" class="btn " ng-class="{true:'btn-danger', false:'btn-info'}[rowIndex ==isSelected() || columnIndex == isSelected()]" ng-repeat="single in letter track by $index" ng-init="columnIndex = $index">
{{columnIndex}}{{single}}
</button>
</ul>
<div >
<h1 ng-mousemove="textArea = textArea + 1">Mouse over me!</h1>
<label for="inputlg">input-lg</label>
<input class="form-control input-lg" id="inputlg" type="text" value="{{ textArea + highlightedLetter }}">
</div>
</div>
</div>
</div>
</body>
</html>
and here is the model
var App = angular.module('App', []);
var theLanguage = 'english';
App.factory('jsonLanguage', function($http){
var theLanguage = 'english';
return {
get: function(theLanguage){
//var url = theLanguage + '.json';
var url = 'english.json';
return $http.get(url);
}
}
});
App.controller('mainController', function($scope, $http, $log, jsonLanguage) {
jsonLanguage.get().then(function(res){
$scope.language = res.data;
$log.log($scope.language);
});
$scope.isSelected = function(rowIndex, columnIndex) {
return 0;
}
});
App.controller('intervalController', function($scope, $log) {
this.$log = $log;
//var name = $scope.single;
//$log.log(name);
});
App.controller('clickController', function($scope, $log) {
$scope.$log = $log;
var highlighted = angular.element(angular.element.getElementsByClassName("btn-danger"));
alert($scope.highlightedLetter = highlighted.value);
});
I greatly appreciate any help as I am new to angular.
There's no getElementsByClassName method in Jquery. Try using standard DOM query:
var highlighted = angular.element(document.querySelector(".btn-danger"));
getElementsByClassName is a function of DOM element, not jQuery.
Try this, it might help you:
var classElement = document.getElementsByClassName("multi-files");
var highlighted= angular.element(classElement);

orderBy is not updating when I click on a button

Hope somebody can help me with my problem.
I am trying to order my list on specific data and this works fine when I say upfront on what it needs to be sorted.
But when I do this when I click on a button it doesn't order my list in anyway.
Hope somebody can help me with this problem.
this is my app.js code:
app.controller("ListController", function ($scope, $interval, $http, myService, OpenDataService) {
myService.async().then(function (d) {
OpenDataService.opendata = d;
$scope.openData = OpenDataService.opendata;
$scope.order = "";
});
$scope.orderOptions = ["gemeente", "locatie"];
$scope.change = function (value) {
console.log("change");
$scope.order = value;
console.log(value);
}
$scope.test = OpenWifiData;
});
And here is the html code I use:
<li ng-click="change('gemeente')"><a>locatie</a></li>
<div id="WifiSpots" ng-controller="ListController" class="col-sm-12 col-md-4 col-md-offset-2">
<div ng-repeat="item in openData | filter:searchText | orderBy: order">
<ul class="list-group">
<li class="list-group-item">
<div class="row wifiSpots" >
<div class="col-md-2">{{item.locatie}}</div>
<div class="col-md-2">{{item.gemeente}}</div>
<div clas="col-md-1">{{item.distance}}</div>
<div clas="col-md-1">{{item.duration}}</div>
<button ng-controller="MapController" ng-click="calculateAndDisplayRoute(item.objectid)" class="btn ">Selecteer</button>
</div>
</li>
</ul>
</div>
</div>
The 'order' in the ng-repeat directive is in a different scope than the one in your controller. Add a wrapper class like so:
$scope.opts = {order: ""};
Then in your change function update that instead:
$scope.opts.order = value;
In the html:
orderBy:opts.order

Filtering and Sorting in Ionic Service Factory

sorry for newbie question. I want to add filtering and sorting by name to my page. When i try using this code it is still work when i am using list of items from variable in controller scope but after i am using factory in services.js, there is two problem:
When i am typing the search word in search box, filter is work and only show the filtered item but i can't clear the filter again (when i am deleting the search word with backspace the item is still filtered)
The order by doesn't work anymore for sorting the items
Here is the code :
(HTML)
<ion-view view-title="Foods">
<ion-content class="padding">
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="foodSearch.search">
</label>
</div>
<button class="button button-block button-energized" ng-click="showOrderOptions()">
Order by
</button>
<div class="list ">
<a class="item" href="#" ng-hide="isOrderOptionsHide" ng-click="reverse=!reverse;order('name',reverse)">
Name
</a>
<a class="item" href="#" ng-hide="isOrderOptionsHide" ng-click="reverse=!reverse;order('rating',reverse)">
Rating
</a>
</div>
<ion-list>
<ion-item class="list card" ng-repeat="food in foods = (foods | filter: filterFood)"
href="#/tab/foods/{{food.id}}">
<div class="item item-head">
<h2 style="text-align:center;"><b>{{food.name}}</b></h2>
<div class="row">
<div class="col item item-image" style="width:100px;height:100px;">
<img class="" src="{{food.imageSrc}}" >
</div>
<div class="col item item-image">
<h2>{{food.title}}</h2>
<div class="row">
<img src="img/smile.jpg" style="width:100%; height:100%; margin-top: -10px;"class="col col-40">
<h3 class="col col-60" >{{food.rating}}</h3>
</div>
</div>
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
(Controller.js):
.controller('FoodsCtrl', function($scope,Foods,$filter) {
$scope.foods = Foods.all();
$scope.remove = function(food) {
Foods.remove(food);
};
$scope.foodSearch = {search: ''};
$scope.filterFood = function (item){
return item.title.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase()) >= 0
|| item.name.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase()) >= 0;
}
$scope.isOrderOptionsHide = true;
$scope.reverse=true;
$scope.showOrderOptions = function (){
$scope.isOrderOptionsHide = !$scope.isOrderOptionsHide;
}
var orderBy = $filter('orderBy');
$scope.order = function(predicate, reverse) {
$scope.foods = orderBy($scope.foods, predicate, reverse);
$scope.isOrderOptionsHide = true;
};
})
Just do this way ng-repeat="food in foods | filter: foodSearch.search | orderBy: 'name'" You do not have to do this :
$scope.filterFood = function (item){
return item.title.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase())..
angular filter automaticaly does that.

Categories