I have implemented a pagination and a filter based on a criteria function: JSBin:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div style="float: right; margin-right: 200px">
has more than 3 letters <input type="checkbox" ng-model="criteria.number" ng-true-value="3" ng-false-value="null" /><br>
</div>
<h3>Existing friends</h3>
<div ng-repeat="friend in filteredFriends | filter: criteriaMatch(criteria)">
{{friend.name}}
</div>
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
</section>
</body>
</html>
JavaScript:
var app = angular.module('plunker', ['ui.bootstrap']);
app.factory('friendsFactory', function() {
var o = {
friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"},
{"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"},
{"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
{"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
{"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
};
return o;
});
app.controller('contentCtrl', function ($scope, friendsFactory) {
$scope.friends = friendsFactory.friends;
$scope.totalItems = $scope.friends.length;
$scope.itemsPerPage = 5
$scope.currentPage = 1;
function refresh() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
var end = begin + $scope.itemsPerPage;
$scope.filteredFriends = friendsFactory.friends.slice(begin, end);
$scope.totalItems = $scope.friends.length;
}
$scope.criteria = { number: "null" };
$scope.criteriaMatch = function (cri) {
return function (friend) {
return ((cri.number === "null") || (friend.name.length > cri.number));
};
};
$scope.$watch('currentPage', refresh);
});
The problem is that, after selecting the filter, it shows the names whose length is greater than 3 page by page. What I want is that, it should recalculate the number of pages, and keep showing 5 good names per page.
Does anyone know how to modify the program to realise this?
Additionally, if I replace "null" by null, it will not work after selecting and deselecting the filter. Does anyone know why?
PS: it is very different from this thread; not a duplication...
Here is a solution: JSBin:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta name="description" content="filter and pagination 1">
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div style="float: right; margin-right: 200px">
has more than 3 letters <input type="checkbox" ng-model="criteria.number" ng-true-value="3" ng-false-value="0" /><br>
</div>
<h3>Existing friends</h3>
<div ng-repeat="friend in filteredFriends | start: (currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
{{friend.name}}
</div>
<pagination total-items="filteredFriends.length" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
</section>
</body>
</html>
JavaScript:
var app = angular.module('plunker', ['ui.bootstrap']);
app.factory('friendsFactory', function() {
var o = {
friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"},
{"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"},
{"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
{"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
{"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
};
return o;
});
app.controller('contentCtrl', function ($scope, friendsFactory) {
$scope.friends = friendsFactory.friends;
$scope.criteria = { number: 0 }
$scope.filteredFriends = $scope.friends;
$scope.itemsPerPage = 5
$scope.currentPage = 1;
function refresh() {
$scope.filteredFriends = $scope.friends.filter(function(item){
return item.name.length > $scope.criteria.number;
})
};
$scope.$watch('currentPage', refresh);
$scope.$watch('criteria.number', refresh);
});
app.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
return input.slice(start);
};
});
Related
I have the following in my view:
<label for="txtFrom">Pickup Location</label>
<input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
<label for="txtDestination">Destination</label>
<input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
<input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">
I am using google maps api for places to autocomplete the input boxes, so if a user starts typing "Lo", he will get a list of places that starts with "Lo" and for example he chooses London.
The problem is in my controller I am not getting the whole autocompleted value. I am only getting what the user initially entered, in this case "Lo".
Here is my controller:
app.controller('BookingsCtrl', function($scope, BookingsService) {
$scope.pickup = "";
$scope.destination = "";
$scope.syncNotification = "";
$scope.calcPrice = function() {
console.log($scope.pickup);
BookingsService.save({
pickup: $scope.pickup,
destination: $scope.destination
}, function(response) {
console.log(response.message);
});
};
});
EDIT:
Here is also a snippet of the JS:
var pickup = document.getElementById('pickup');
var options = {
componentRestrictions: {
country: 'ee'
}
};
var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
pickup.innerHtml = place.formatted_address;
var lat = place.geometry.location.lat();
var long = place.geometry.location.lng();
});
EDIT 2 : Added service
app.service('BookingsService', function ($resource) {
return $resource('http://localhost:3000/', {});
});
EDIT 3 : Template
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt1Y30OssBToIzSCOr3g5IkN3c0D75XVE&libraries=places"
></script>
</head>
<body ng-app='strelsau_client'>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<img class="masthead-brand" src="../assets/img/logo.png">
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div ng-view>
</div>
</div>
</div>
</div>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers/bookings_controllers.js"></script>
<script src="js/services/bookings_service.js"></script>
</body>
</html>
In fact pickup input element is not getting updated once the place is resolved.
The problem with this function:
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
pickup.innerHtml = place.formatted_address; //invalid
//...
});
For setting input field value should be used value property.
Anyway, given the example, try to replace it with:
(function (scope) {
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
scope.pickup = place.formatted_address;
});
})($scope);
Example
angular.module('myApp', [])
.controller('BookingsCtrl', function ($scope) {
$scope.pickup = "";
$scope.destination = "";
$scope.syncNotification = "";
var pickup = document.getElementById('pickup');
var options = {
componentRestrictions: {
country: 'ee'
}
};
var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);
(function (scope) {
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
scope.pickup = place.formatted_address;
});
})($scope);
$scope.calcPrice = function () {
console.log($scope.pickup);
alert($scope.pickup);
/*BookingsService.save({
pickup: $scope.pickup,
destination: $scope.destination
}, function (response) {
console.log(response.message);
});*/
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div ng-app="myApp" ng-controller="BookingsCtrl" ng-cloak>
<label for="txtFrom">Pickup Location</label>
<input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
<label for="txtDestination">Destination</label>
<input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
<input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">
</div>
I have an issue while loading comments (with emoji) via API.
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="./angular-1.2.15.js"></script>
<!-- ... -->
</head>
<body>
<!-- ... -->
<ul>
<li ng-repeat="comment in comments">
<span ng-bind="comment.Author"></span>
<span ng-bind="comment.Description"></span>
</li>
</ul>
<!-- ... -->
<script>
angular.module('app', []);
// ...
</script>
</body>
</html>
Before limitTo filter everything goes as expected:
<span>John Doe</span>
<span>Hey, how are you? 😃😄😅😆😉😊😋😎😍😘😗😙😚☺😇😐😑😆😶😏😣😥😮😯😪😫😴😌😛😜😝😒😓😔😕😲😷😖😞😟</span>
But, when I try to apply limitTo filter, something goes wrong:
<span>John Doe</span>
<span>Hey, how are you? 😃😄�</span>
What am I doing wrong? Any ideas?
Here is the demo app:
var app = angular.module('myApp', []);
app.filter('range', function () {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});
app.controller('DemoController', ['$scope', function ($scope) {
$scope.comment = {
Author: "John Doe",
Description: "Hey, how are you? 😃😄😅😆😉😊😋😎😍😘😗😙😚☺😇😐😑😆😶😏😣😥😮😯😪😫😴😌😛😜😝😒😓😔😕😲😷😖😞😟"
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="DemoController">
<ul>
<li ng-repeat="i in [] | range:78" ng-init="limit = 20+i">
<div ng-bind="comment.Author"></div>
<span ng-bind="comment.Description | limitTo: limit"></span> (<span ng-bind="limit"></span>)
</li>
</ul>
</div>
</div>
If you try to get the length of characters of a single emoji in http://www.charactercountonline.com then it will show 2 characters for normal emoji and 1 character in small emoji. So because using limit, one character is missed so it show a question mark sign.
var app = angular.module('myApp', []);
app.filter('range', function () {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});
app.controller('DemoController', ['$scope', function ($scope) {
$scope.setLimit = function(i){
$scope.limit = 20+i;
}
$scope.comment = {
Author: "John Doe",
Description: "Hey, how are you? 😃😄😅😆😉😊😋😎😍😘😗😙😚☺😇😐😑😆😶😏😣😥😮😯😪😫😴😌😛😜😝😒😓😔😕😲😷😖😞😟"
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="DemoController">
<ul>
<li ng-repeat="i in [] | range:78" ng-init="setLimit(i)">
<div ng-bind="comment.Author"></div>
<span ng-bind="comment.Description | limitTo: limit"></span> (<span ng-bind="limit"></span>)
</li>
</ul>
</div>
</div>
I am trying to make a filter function. Filtering is working as expected but pagination is not updating. When I click on "Mobile Phone" checkbox it shows one record in the first page, two records in second page and so on..
Also, page count is not updating according to the search result.
How to solve this?
Index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<body ng-app="ngTest" ng-controller="testCtrl" ng-cloak >
<div class="container">
<div class="row">
<input type="text" ng-model="searchFilter">
<input type="checkbox" ng-click="includeType('Tablet')" >Tablet
<input type="checkbox" ng-click="includeType('Mobile Phone')" >Mobile Phone
<input type="checkbox" ng-click="includeDistrict('Galle')" >Galle
<input type="checkbox" ng-click="includeDistrict('Kandy')" >Kandy
</div>
<div class="row">
<h4>{{ads.length}} total</h4>
<div class="col-lg-12" ng-repeat="ad in filteredAds | filter:searchFilter | filter:typeFilter | filter:districtFilter" style="border:1px solid #d84530; margin-bottom:20px;">
<p >Post Id: {{ad.post_id}}<br/>
User Id: {{ad.user_id}}<br/>
District: {{ad.district}}<br/>
Town: {{ad.town}}<br/>
Brand: {{ad.brand}}<br/>
Model: {{ad.model}}<br/>
Type: {{ad.type}}<br/>
Auth: {{ad.auth}}<br/>
Condition: {{ad.condition}}<br/>
Trade: {{ad.trade}}<br/>
Price: {{ad.price}}</p>
</div>
<uib-pagination ng-model="currentPage" total-items="ads.length" items-per-page="numPerPage" max-size="maxSize" boundary-links="true"></uib-pagination>
<p>{{ads.length}} and {{maxSize}} and {{currentPage}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<script src="app.js"></script>
<script src="script.js"></script>
</body>
</html>
app.js
angular.module("ngTest",['ui.bootstrap'])
script.js
(function(){
"use strict";
angular
.module("ngTest")
.controller("testCtrl",function($scope, $http){
$http.get('test.json').then(function(result){
$scope.filteredAds = [];
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.maxSize = 5;
$scope.ads = result.data;
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredAds = $scope.ads.slice(begin,end);
});
$scope.typeIncludes = [];
$scope.includeType = function(type) {
var i = $.inArray(type, $scope.typeIncludes);
if (i > -1) {
$scope.typeIncludes.splice(i, 1);
} else {
$scope.typeIncludes.push(type);
}
}
$scope.typeFilter = function(ads) {
if ($scope.typeIncludes.length > 0) {
if ($.inArray(ads.type, $scope.typeIncludes) < 0)
return;
}
return ads;
}
$scope.districtIncludes = [];
$scope.includeDistrict = function(district) {
var i = $.inArray(district, $scope.districtIncludes);
if (i > -1) {
$scope.districtIncludes.splice(i, 1);
} else {
$scope.districtIncludes.push(district);
}
}
$scope.districtFilter = function(ads) {
if ($scope.districtIncludes.length > 0) {
if ($.inArray(ads.district, $scope.districtIncludes) < 0)
return;
}
return ads;
}
});
});
})();
http://plnkr.co/edit/RV6pQYMTzETZGNKdAFGb?p=preview
Perhaps it is a question of style, but I wouldn't use filters for eliminating data from a collection. I tend to process the data in the controller, or in a service, before serving it to the view.
Moreover, in my experience, it is not good to assign a new value to a watched collection: the original reference is lost and AngularJS is confused.
Therefore, I rather manipulate the original array, to insert or remove items from it.
I am not able to put the data into ng-model in view from an object in controller.
VIEW1 :
<input type="text" class="user-input" name="profile.firstname" ng-model="profile.firstname" ng-minlength="2" required pattern=".{2,}" placeholder="E.g. Anvika" title="Please enter atleast 2 characters">
When I click a button in VIEW2, it fires a function (say function 'test').
VIEW2
<input type="submit" ng-click="register.test()" ui-sref="doctorRegister" value="Profile">
CONTROLLER:
var app = angular.module('app');
app.controller('registerController', ['$scope', 'tempDataStorageService', function ($scope, tempDataStorageService) {
var register = this;
register.doctor = {};
register.test = function () {
register.refreshProfile = tempDataStorageService.get(register.doctor.profile);
//console.log(register.refreshProfile);
var a = register.refreshProfile.firstname;
console.log(a);
}
}
TempDataStorageService:
var app = angular.module('app');
app.factory('tempDataStorageService', function() {
var savedData = {};
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
EDIT: I have tried to show the declaration of the controller as well, if that helps.
How can I make it so that when I click on the Profile button on VIEW2, it populates VIEW1 with the data?
The plunker:
Working example
The html:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<form>
<h2 class="text-primary">Get data into ng-Model from object in controller</h2>
<hr>
<div class="form-group">
<h3 ng-class="!mainCtrl.firstName? 'text-danger' : 'text-success'">Enter Name</h3>
<input type="text" class="form-control" ng-model="mainCtrl.firstName" placeholder="E.g. Anvika">
</div>
<hr>
<h3 class="text-info">This is what you are typing: {{mainCtrl.firstName}}</h3>
<button type="button" class="btn btn-success" ng-click="mainCtrl.test()">Save Name</button>
</form>
<hr>
<h3 class="text-info">This is what is stored</h3>
<h4>Doctor first name: {{mainCtrl.storedData.doctorFirstName}}</h4>
</body>
</html>
The JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['tempDataStorageService', function(tempDataStorageService) {
var register = this;
register.firstName = "";
register.storedData = tempDataStorageService;
register.test = function () {
tempDataStorageService.setName(register.firstName);
}
}]);
app.factory('tempDataStorageService', function() {
// The service object
var profile = {};
profile.doctorFirstName = "No doctor data stored";
//The functions
profile.setName = function(data) {
profile.doctorFirstName = data;
}
profile.getName = function() {
return profile.doctorFirstName;
}
// return the service object
return profile;
});
Recommendations:
Please properly format code when asking questions.
As good practice use a style guide. A good starting point is John
Papa's Angular Style Guide
I'm trying to develop a mobile app with onsen+cordova
What i need is:
When the app start it load login.html page. If the app detect that the user is logged then it redirect to the home.html
For each "protected page" i want to call a function that detected if user is logged.
If not i want to redirect to login page.
All the "protected pages" have a slide menu.
Following what i've done:
index.html
<html ng-app="app2gest">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<title>App2Gest</title>
<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsenui.css"/>
<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components.css"/>
<!-- Download also your onsen-css-components.css stylesheet using the integrated CSS Components Theme Roller
http://components.onsenui.io -->
<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-blue-theme.css"/>
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-default.css"/>-->
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-blue-basic-theme.css"/> -->
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-dark-theme.css"/> -->
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-sunshine-theme.css"/> -->
<!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-purple-theme.css"/> -->
<link rel="stylesheet" type="text/css" href="css/angular-carousel.css"/>
<!-- NVD3 re-usable charting library (based on D3) -->
<link rel="stylesheet" type="text/css" href="css/nvd3/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<ons-sliding-menu menu-page="menu.html" main-page="login.html" side="left" max-slide-distance="85%" swipable="true" swipe-target-width="100" var="menu">
</ons-sliding-menu>
<!-- Javascripts -->
<script type="text/javascript" src="vendors/onsen/js/angular/angular.js"></script>
<script type="text/javascript" src="js/angular-touch.js"></script>
<script type="text/javascript" src="vendors/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="js/lodash.underscore.min.js"></script>
<script type="text/javascript" src="js/bluebird.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/angular-local-storage.js"></script>
<script type="text/javascript" src="js/angular-sanitize.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/app-local-storage.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
home.html
<ons-page ng-controller="HomeController" ng-init="LoginUtility.checkLogin()">
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button onclick="ons.slidingMenu.toggleMenu()">
<ons-icon icon="bars">
</ons-toolbar-button>
</div>
<div class="center">App2Gest</div>
<div class="right">
<ons-toolbar-button onclick="appNavigator.pushPage('settings.html', {title: 'Settings', animation: 'slide'})">
<ons-icon icon="gears">
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<section class="home-grid">
<div class="grid-menu">
<div class="centering-and-alignment" ng-repeat="row in items| partition:2">
<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="showDetail(($parent.$index * row.length) + $index);">
<ons-icon icon="{{item.icon}}"></ons-icon>
<div class="grid-menu-item-label">{{item.title}}</div>
</div>
</div>
</div>
</section>
</ons-scroller>
<div>
</div>
</ons-page>
login.html
<ons-navigator title="Navigator" var="appNavigator">
<ons-page sliding-menu-ignore="true" ng-controller="LoginController" ng-init="LoginUtility.checkLogin()">
<ons-toolbar>
<div class="left">
</div>
<div class="center">App2Gest - Login</div>
</ons-toolbar>
<div class="main-image-wrapper">
<i class="fa fa-sign-in main-image"></i>
</div>
<form ng-submit="LoginUtility.login()">
<input type="email" class="text-input--underbar" placeholder="Username" value="" ng-model="username">
<input type="password" class="text-input--underbar" placeholder="Password" value="" ng-model="password">
<br>
<button class="button login-button">Log in</button>
<br>
</form>
</ons-page>
</ons-navigator>
app.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
ons.setDefaultDeviceBackButtonListener(function() {
if (navigator.notification.confirm("Vuoi chiudere l\'app?",
function(index) {
if (index == 1) { // OK button
navigator.app.exitApp(); // Close the app
}
}
))
;
});
// Open any external link with InAppBrowser Plugin
$(document).on('click', 'a[href^=http], a[href^=https]', function(e) {
e.preventDefault();
var $this = $(this);
var target = $this.data('inAppBrowser') || '_blank';
window.open($this.attr('href'), target);
});
// Initialize Push Notifications
// Uncomment the following initialization when you have made the appropriate configuration for iOS - http://goo.gl/YKQL8k and for Android - http://goo.gl/SPGWDJ
//app.initPushwoosh();
},
// Update DOM on a Received Event
receivedEvent: function(id) {
//var parentElement = document.getElementById(id);
//var listeningElement = parentElement.querySelector('.listening');
//var receivedElement = parentElement.querySelector('.received');
//listeningElement.setAttribute('style', 'display:none;');
//receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
},
// Register device for Push Notifications
initPushwoosh: function() {
var pushNotification = window.plugins.pushNotification;
if (device.platform == "Android") {
registerPushwooshAndroid();
}
if (device.platform == "iPhone" || device.platform == "iOS") {
registerPushwooshIOS();
}
}
};
(function() {
var app = angular.module('app2gest', ['onsen.directives', 'ngTouch', 'ngSanitize', 'appLocalStorage', 'LocalStorageModule', 'ui.event']);
app.controller("LoginController", function($scope, LoginUtility) {
$scope.LoginUtility = LoginUtility;
$scope.LoginUtility.setScope($scope);
});
// Home Controller
app.controller('HomeController', function($scope, Data, LoginUtility) {
$scope.items = Data.items;
$scope.LoginUtility = LoginUtility;
$scope.LoginUtility.setScope($scope);
$scope.showDetail = function(index) {
var selectedItem = $scope.items[index];
Data.selectedItem = selectedItem;
if (selectedItem.type === 'internal') {
$scope.ons.navigator.pushPage(selectedItem.url, {title: selectedItem.title, animation: 'slide'});
}
else {
window.open(selectedItem.url);
}
};
});
app.controller('CaricoHomeController', function($scope) {
});
// Menu Controller
app.controller('MenuController', function($scope, MenuData) {
$scope.items = MenuData.items;
$scope.showDetail = function(index) {
var selectedItem = $scope.items[index];
MenuData.selectedItem = selectedItem;
$scope.ons.slidingMenu.setMainPage(selectedItem.page, {closeMenu: true});
};
});
// Barcodescanner Controller
app.controller('BarcodescannerController', function($scope) {
$scope.scan = function() {
cordova.plugins.barcodeScanner.scan(function(result) {
$scope.result = result;
$scope.$apply();
}, function(error) {
$scope.error = error;
$scope.$apply();
});
}
});
//dummy implementation
app.factory('LoginUtility', function() {
var username;
var password;
var scopeVar;
var loginObj = {};
loginObj.setScope = function(elem) {
scopeVar = elem;
};
loginObj.isGuest = function() {
return username == null;
};
loginObj.login = function() {
console.log('login called');
username = scopeVar.username;
password = scopeVar.password;
//dummy login, we assume login always succeded
scopeVar.ons.slidingMenu.setMainPage("home.html", {closeMenu: true});
};
loginObj.logout = function() {
username = null;
};
loginObj.checkLogin = function() {
if (this.isGuest() && **imNotInLoginPage()**) {
scopeVar.ons.slidingMenu.setMainPage("login.html", {closeMenu: true});
}
};
return loginObj;
});
// Filter
app.filter('partition', function($cacheFactory) {
var arrayCache = $cacheFactory('partition');
var filter = function(arr, size) {
if (!arr) {
return;
}
var newArr = [];
for (var i = 0; i < arr.length; i += size) {
newArr.push(arr.slice(i, i + size));
}
var cachedParts;
var arrString = JSON.stringify(arr);
cachedParts = arrayCache.get(arrString + size);
if (JSON.stringify(cachedParts) === JSON.stringify(newArr)) {
return cachedParts;
}
arrayCache.put(arrString + size, newArr);
return newArr;
};
return filter;
});
})();
For the dummy function imNotInLoginPage() at the start of the app if use appNavigator.getCurrentPage() it works but appNavigator.getCurrentPage().page is empty
After Login instead if i call appNavigator.getCurrentPage() it is undefined and i receive a js undefined error.
How can i check if i'm in loginpage or in another?
And the very big question, is this a good praticse in angular?
Otherwise how can i achieve this goal with angular+onsen???
The support from the onsen's theme is very poor.
I've found other solutions involving angular route, but there are not compatible with onsen.
I'm going crazy for implementing this standard thing. I hope that someone can help me, providing a complete example code.
Thank you
I created sample. If I misunderstand what you mean, please tell me.
index.html
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body>
<ons-navigator var="myNavigator" page="login.html">
</ons-navigator>
</body>
</html>
app.js
var myApp = angular.module("myApp", ['onsen']);
myApp.controller('loginCtrl', function($scope) {
if(checkLogin()) {
openProtectedPage();
}
function openProtectedPage() {
alert("you are already logged in. open protected page");
setTimeout(function() {
myNavigator.pushPage('protected.html');
}, 1000);
}
function checkLogin() {
//temporariry return true;
// please write your own logic to detect user login;
return true;
}
});
login.html
<ons-page ng-controller="loginCtrl">
<ons-toolbar>
<div class="center">Login Page</div>
</ons-toolbar>
<div style="text-align: center; margin-top: 30px;">
Email: <input type="text" />
</div>
<div style="text-align: center; margin-top: 30px;">
Password: <input type="text" />
</div>
<div style="text-align: center;margin-top: 30px;">
<ons-button>
Sign In
</ons-button>
</div>
</ons-page>
protected.html
<ons-page>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
</ons-page>
I hope this example would help you.