I am using google places API in my ionic/cordova, angular based mobile app in android platform.
I am able to get search results from text field value using API but when i select an option by simply clicking on one of search results, the text box remains empty.
But when I press and keep holding the search result option for 2-3 secs, that option is selected.
It seems weird to me but it is happening.
place_changed event is not getting triggered on quick tap.
I really dont know what can be the cause of this issue? I have tried Faskclick.js to eliminate 300 ms but that didnt work though I think this issue is not related to 300 ms delay.
My code:
function initialize() {
var autocomplete = new google.maps.places.Autocomplete(input, options);
};
Please help me out here.
I used ngMap and angular-google-places-autocomplete together in the following example.
Hope it helps.
angular.module('app', ['ionic', 'google.places', 'ngMap'])
.controller('MapCtrl', ['$scope', 'NgMap',
function ($scope, NgMap) {
$scope.location = null;
NgMap.getMap().then(function (map) {
console.log("getMap");
$scope.map = map;
});
$scope.$on('g-places-autocomplete:select', function(event, place) {
console.log('new location: ' + JSON.stringify(place));
$scope.data = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
};
$scope.map.setCenter(place.geometry.location);
console.log($scope.data);
});
}
]);
.map {
width: 100%;
height: 500px !important;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="https://maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.js"></script>
<link href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="MapCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic map</h1>
</ion-header-bar>
<ion-content class="has-header padding">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" g-places-autocomplete ng-model="location" placeholder="Insert address/location"/>
</label>
<button ng-click="location = ''" class="button ion-android-close input-button button-small" ng-show="location"></button>
</div>
<ng-map zoom="6" class="map">
<marker position="{{data.lat}}, {{data.lng}}"></marker>
</ng-map>
</ion-content>
</ion-pane>
</body>
</html>
I didnt find its solution but https://github.com/stephjang/placecomplete is a great plugin as work around :)
Related
Having issues getting a simple filter to work for an album selection app i'm building for experience using jsonplaceholderdata. I tried to set ng-model to an expression and filtering by that expression but nothing changes when i enter text into my input bar. Unsure as to what I'm missing.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="album.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="album.css">
</head>
<body>
<div class="bar">
<input type="text" class="search" ng-model="q" placeholder="Enter your search terms" />
<button ng-click="search(q)">Search</button>
</div>
<div ng-app="myApp" ng-controller="AlbumCtrl">
<div ng-click="showme = !showme" ng-init="count=0" ng-repeat="album in albumData|filter:q" id="thumbWrapper">
<h1>{{album.id}}</h1>
<p>{{album.title}}</p>
<div id="thumbList"ng-show="showme"class="albumContent">
<ul ng-controller="PhotoCtrl" id="thumbList">
<li ng-repeat="photo in photoData" ng-if="album.userId == photo.albumId">
<img ng-src={{photo.url}}>
</li>
</ul>
</div>
</div>
</div>
This is my angular js code:
var app = angular.module('myApp', []);
app.controller('AlbumCtrl', function ($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/albums").then(function(response) {
$scope.albumData = response.data;
console.log($scope.albumData);
});
});
app.controller('PhotoCtrl', function($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/photos").then(function(response) {
$scope.photoData = response.data;
// console.log($scope.photoData);
});
});
Any help is much appreciated.
You don't need to use a controller function. Because your q is already on the $scope, it will work as soon as you start typing in the input box.
Your controller is outside of the scope of the 'q' scope variable though.
I want to create an alert box in ionic using angular js but when I click the alert button nothing happens. Please kindly direct me.
This is my index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic-AngularJS-Cordova</title>
<!-- Ionic framework - replace the CDN links with local files and build -->
<link href="lib/ionicframework/ionic.min.css" rel="stylesheet">
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
<script src="lib/ionicframework/ionic.bundle.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
<style>
.box {height:300px;padding: 10px}
</style>
</head>
<body data-ng-controller="AppCtrl">
<ion-header-bar class="bar-balanced">
<h1 class="title">Welcome to my web app</h1>
<button class="button" data-ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<ion-content>
<h1>Some Content</h1>
</ion-content>
<div class="bar bar-footer">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</div>
</body>
</html>
This is my app.js
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function() {
ionic.Platform.ready(function() {
navigator.splashscreen.hide();
});
});
function AppCtrl($scope, $log){
$scope.refresh = function(){
alert("Button Pressed");
}
}
On clicking the refresh button I expect a pop up to appear.
I was able to solve my problem using this:
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope) {
$scope.refresh = function(){
alert("Button Pressed");
};
ionic.Platform.ready(function() {
navigator.splashscreen.hide();
});
});
regards.
I'm using an ons-modal to show a loading text and spinner icon when the app is fetching some data.
The code is as follows:
<ons-modal var="loadingModal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Cargando...
<br>
</ons-modal>
I can correctly show an hide it using loadingModal.show(); and loadingModal.hide();
But how would I know in Angular if it is shown or hidden?
Update
Apparently my not-so-elegant solution is not not so elegant after all :D
Here is a pull request that shows the method isShown() that should be available
soon I guess
Internally the function looks similar to whats in this answer
isShown() {
return this.style.display !== 'none';
}
Not a super elegant solution, but it works
if( $scope.loadingModal._element.css('display') == 'none'){
// hidden now
}else{
// visible now
}
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Modal | Onsen UI</title>
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/demo/styles/app.css"/>
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsenui.css">
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsen-css-components.css">
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/angular/angular.js"></script>
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/onsenui.js"></script>
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/demo/app.js"></script>
<script>
function check($el){
return $el.css('display') === 'none' ? 'hidden' : 'visible';
}
angular.module('myApp').controller('PageController', function($scope) {
$scope.open = function() {
$scope.app.modal.show();
alert(check($scope.app.modal._element));
setTimeout(function() {
$scope.app.modal.hide();
alert(check($scope.app.modal._element));
}, 2000);
};
});
</script>
</head>
<body ng-controller="PageController">
<ons-navigator>
<ons-modal var="app.modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Cargando...
<br>
</ons-modal>
<ons-toolbar>
<div class="center">Modal</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button modifier="light" ng-click="open();">Open Modal</ons-button>
</p>
</ons-navigator>
</body>
</html>
<ons-list id="myList"></ons-list>
Then a statement in a loop that does
$('#myList').append("<ons-list-item>" + variableItem + "</ons-list-item>");
And probably some sort of a refresh like so
$('#myList').listview('refresh');
after exiting from the loop.
Can this be done without angular?
Add item via javascript, like:
var listElement = document.getElementById('myListElement'); //My ons-list element
var newItemElement = document.createElement('ons-list-item'); //My new item
newItemElement.innerText = 'Lorem ipusm dolor'; //Text or HTML inside
//Update ons render
ons.compile(listElement);
#Rafa's answer is correct, but you seemed to use jQuery instead of plain JS.
#Ataru's answer utilizes jQuery, but lack ons.Compile();
ons.compile() is required to generate regular HTML from onsen directives (custom Web Components) since not all browser support them (yet).
Here's sum up:
$('#myList').append("<ons-list-item>" + variableItem + "</ons-list-item>");
ons.compile($('#myList')[0]);
index.html
<!DOCTYPE HTML>
<html ng-app="yourApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- If you don't use Monaca, please comment out here and load Onsen UI directly. -->
<script src="components/loader.js"></script>
<script src="jquery.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
var yourApp = angular.module('yourApp', ['onsen']);
yourApp.controller('listCtrl', function($scope, $timeout) {
// Add new list ith jQuery.
var onsList = $("#ons-list-test");
onsList.append('<ons-list-item class="list__item ons-list-item-inner">Item 1</ons-list-item>');
onsList.append('<ons-list-item class="list__item ons-list-item-inner">Item 2</ons-list-item>');
onsList.append('<ons-list-item class="list__item ons-list-item-inner">Item 3</ons-list-item>');
onsList.append('<ons-list-item class="list__item ons-list-item-inner">Item 4</ons-list-item>');
onsList.append('<ons-list-item class="list__item ons-list-item-inner" style="background:#999999;">Item 5</ons-list-item>');
});
</script>
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator" page="page1.html">
</ons-navigator>
</body>
</html>
page1.html
<ons-page>
<ons-toolbar>
<div class="center">Navigator</div>
</ons-toolbar>
<div style="text-align: center" ng-controller="listCtrl">
<ons-list id="ons-list-test">
</ons-list>
</div>
</ons-page>
Thank you.
You can add your new list by using jQuery as following:
What worked for me is:
<ons-list id="list4" >
<ons-list-header>Grocery list</ons-list-header>
<ons-list-item >Broccoli</ons-list-item>
<ons-list-item>Oranges</ons-list-item>
</ons-list>
<script>
var m = "Apples & Pears"
var item = ons._util.createElement("<ons-list-item> </ons-list-item>");
item.innerHTML = m;
document.getElementById("list4").appendChild(item);
</script>
Maybe you have to add compile to it, the internet is not sure about it (-;
So, I'm trying to get angularjs working with KendoUI mobile...hybrid mobile app.
HTML:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
Home
</li>
<li>
Settings
</li>
<li>
Contacts
</li>
</ul>
</div>
AngularJS:
(function () {
var ngApp = angular.module("MyApp", ["kendo.directives"]);
ngApp.controller('HomeController', ['$scope', function ($scope) {
$scope.foo = 'something';
alert("HOME CONTROLLER");
}]);
}());
Part View HTML:
<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>
What I'm thinking "should" happen is the ng-controller="HomeController" should cause the HomeController to fire and populate the $scope.foo variable. This should bind to the {{foo}} on the view page as well as show the alert...not happenin'.
Any ideas?
Kendo UI developer here, the Kendo UI mobile application and AngularJS do not work well together currently. The good news is that this is something we are actually working on right now - it will be released in our upcoming 2014 Q3 release, due November.
The Telerik resource linked here should be helpful to devs looking to optimally integrate AngularJS functionality into Kendo UI Mobile: http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial