Can anyone please help me out with this google autofill function? The function wasn't working when I tried to run it.
Is it the problem with the code?
I am a fresher and please do help me out.
<input type="text" name="letsfrom" id="letsfrom" required>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
Related
Good morning everybody,
I am new in Onsen UI, using Angular JS v1.6.1 and Onsen UI v2.
I can’t figure out why my data binding does not work. CSS and JS files seem to load OK but when I open the html file :
1 - button does not show the notification when I click it
2 - The text “Default” does not appear and {{myName}} shows instead
3- Filling the input fill does not update {{myName}}
I have followed the Onsen UI guide (https://onsen.io/v2/docs/guide/angular1/)… I do not understand what could be the problem. I would be very grateful if some of you guys could help me on this topic.
Have a good day !
Cedric
<!doctype html>
<html lang=“en” ng-app=“my-app”>
<head>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=“onsenui/css/onsenui.css”/>
<link rel=“stylesheet” href=“onsenui/css/onsen-css-components.css”/>
<script src=“js/angular.min.js”></script>
<script src=“onsenui/js/onsenui.js”></script>
<script src=“onsenui/js/angular-onsenui.js”></script>
<script>
var module = angular.module('my-app', ['onsen']);
module.controller('AppController', function() {
ons.notification.alert('Welcome !');
$scope.myName = "Default";
$scope.clickHandler = function(event) { ons.notification.alert('Hello ' + $scope.myName);}
});
</script>
</head>
<body ng-controller=“AppController”>
{{myName}}
<br> <br>
<ons-input ng-bind=“myName” placeholder=“Your Name” float></ons-input>
<br> <br>
<ons-button ng-click=“clickHandler”>Say Hello</ons-button>
</body>
</html>
Replace all “ with either " or '.
Inject $scope into your controller:
module.controller('AppController', function($scope) { ...
Change:
ng-click="clickHandler"
To:
ng-click="clickHandler()"
Demo: http://plnkr.co/edit/HomH2oTmESLrs7zSrKei?p=preview
Thanks again for your help. Regarding the text data binding with the input, I nearly managed to fix it as well:
<script>
var app = angular.module('myApp', ['onsen']);
app.controller('todoCtrl', function($scope) {
ons.notification.alert('welcome!');
$scope.name = 'Default';
$scope.clickHandler = function(event) {
ons.notification.alert('Hello ' + $scope.name);
}
});
</script>
</head>
<body>
<ons-span ng-bind='name'></ons-span>
<br>
<ons-input ng-model='name' placeholder='Your Name' float></ons-input>
<br>
<ons-button ng-click='clickHandler()'>Say Hello</ons-button>
</body>
</html>
Each time I click on the "Say Hello" button, data binding updates itself :
However it does not updates automatically without clicking the button.
I observed that if I replace "ons-input" by "input", the data binding updates automatically but I loose the Onsen style of the input... I would like to keep all my html elements as ons- if possible.
Thank you very much !
I am wondering how to call the angularjs function by Pressing tab button?
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
</div>
How to call the function using angularJs, after Pressing the firstName and click on tab button. since i am new to angularJs, i know ng-click,ng-change, but i got no idea about this.
please someone help me.
Thanks in advance
You could use ngBlur.
However, it will run the function if you click outside of the input as well as tabbing out.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.tabbedout = function(val) {
console.log("tabbedout: " + val);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName" ng-blur="tabbedout(firstName)"><br>
Last Name: <input type="text" ng-model="lastName" ng-blur="tabbedout(lastName)"><br>
</div>
You say click a button, but I assume you want to handle the tab keydown/keyup events since there is no tab-button to click.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var _this = this;
_this.firstName = '';
_this.handleKeyDown = function($event) {
if ($event.which == 9)
alert('tab was pressed! Current value is: ' + _this.firstName);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
First Name: <input type="text" ng-model="vm.firstName" ng-keydown="vm.handleKeyDown($event)"><br>
</div>
I am using the following pattern to validate email
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
Copied the pattern from this fiddle. (http://jsfiddle.net/jquery4u/5rPmV/) which works wonderful.
I tried implementing the same with AngularJS like this
<input type="text" placeholder="Email" ng-model="Employer.Email" ng-pattern="emailPattern" class="form-control" name="email" required />
<p ng-show="showMessages && registerEmployerForm.email.$error.required" class="text-danger">
Email is required.
</p>
<p ng-show="showMessages && !registerEmployerForm.email.$error.required && registerEmployerForm.email.$error.pattern" class="text-danger">
Email is invalid.
</p>
JavaScript
$scope.showMessages = true;
$scope.Employer = {
"Email": ""
};
$scope.emailPattern = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
$scope.RegisterEmployer = function(myForm) {
console.log(myForm)
};
My Fiddle: http://jsfiddle.net/codeandcloud/jusoqs88/
The problem is that if I try naveen#naveennaveen.com, the first fiddle passes and the second fiddle fails. My questions
Why for the same pattern AngularJS behaves differently?
Is there something with my code?
P.S: I know input type="email" combined with registerEmployerForm.email.$error.email is the Angular way to do it. Unfortunately I cannot implement it here as the regex should not pass something like naveen#naveennaveen
Here is regexp for email validation:
var re = /^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/;
UPDATE
I can see this is not working in fiddle with 2 dots after #, but here it works : regex test online
UPDATE2
Looks like something wrong with fiddle, try this in your code, it will work:
var re = /^("")("".+?(?<!\)""#)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'*\+=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])#))([)([(\d{1,3}\.){3}\d{1,3}])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9])$/
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script>
var app = angular.module('ngApp', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ text: 'abdo#tatwerat.com' },
{ text: 'info#tatwerat.com' },
{ text: 'admin#tatwerat.com' }
];
});
</script>
<div ng-app="ngApp" ng-controller="MainCtrl">
<tags-input ng-model="tags" placeholder="Add Emails" allowed-tags-pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$"></tags-input>
<p>Emails : {{tags}}</p>
</div>
I'm in a project that uses angularjs and rails. So, i'm using this library too:
https://github.com/FineLinePrototyping/angularjs-rails-resource
Well, when i'm using the controller as syntax from angularjs, some strange behaviour is happening. You can see that in this plunker example:
http://plnkr.co/edit/i4Ohhh8llS7WN68sLX5q?p=preview
The promise object returned by the remote call in first controller using the angularjs-rails-resource library in some way is setting the instance variable that belongs to the second controller. I don't know if it is a bug in the library, or an angular behaviour that i should know. Anyway, is clearly an undesirable behaviour.
Here is the same plunker code (index.html):
<!doctype html>
<html ng-app="Demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="https://rawgit.com/FineLinePrototyping/dist-angularjs-rails-resource/master/angularjs-rails-resource.min.js"></script>
<script src="example.js"></script>
</head>
<body>
<div ng-controller="Controller1 as ctrl1">
<form>
<label>should appear first remote</label>
<input type="text" ng-model="ctrl1.remote.name"/><br>
<label>should appear first local</label>
<input type="text" ng-model="ctrl1.local.name"/>
</form>
</div>
<br>
<div ng-controller="Controller2 as ctrl2">
<form>
<label>should appear second local</label>
<input type="text" ng-model="ctrl2.remote.name"/><br>
<label>should appear second local</label>
<input type="text" ng-model="ctrl2.local.name"/>
</form>
</div>
</body>
</html>
My angularjs code (example.js):
angular.module('Demo', ['rails']);
angular.module('Demo').controller('Controller1', ['$scope', 'Remote', function($scope, Remote) {
ctrl = this;
ctrl.remote = {};
Remote.get().then(function(remote) {
ctrl.remote = remote;
});
ctrl.local = {};
ctrl.local.name = "first local";
}]);
angular.module('Demo').controller('Controller2', ['$scope', function($scope) {
ctrl = this;
// SAME VARIABLE NAME
// WILL RECEIVE VALUE FROM REMOTE CALL ON FIRST CONTROLLER!!!
ctrl.remote = {};
ctrl.remote.name = "second local";
// SAME VARIABLE NAME
ctrl.local = {};
ctrl.local.name = "second local";
}])
angular.module('Demo').factory('Remote', [
'railsResourceFactory',
'railsSerializer',
function (railsResourceFactory, railsSerializer) {
return railsResourceFactory({
url:'clients.json',
name: 'remote',
})
}]
);
clients.json
{
"name":"first remote"
}
Any ideias how fix this without having to change variable names to avoid conflict? Because that way we will just mask the problem.
I report the problem to angularjs-rails-resource library but no answer until now.
You need to use var when declaring your variables, otherwise they're global.
Use
var ctrl = this; instead of just ctrl = this;
Also, 'use strict' is a nice thing to use(and it helps in these situations)
im trying to do a little example to learn on using cachefactory but i get the error that
"Argument 'CacheSampleController' is not a function"
this is my app
var eventsApp = angular.module('eventsApp', ['ngResource'])
.factory('myCache', function($cacheFactory) {
return $cacheFactory('myCache', {capacity:3});
});
this is the hmtl file:
<div ng-controller="CacheSampleController" style="padding-left:20px; padding-right:20px">
key: <input type="text" ng-model="key"/><br/>
value: <input type="text" ng-model="value"/><br/>
<button type="button" class="btn" ng-click="addToCache(key, value)">Add To Cache</button><br/>
<br/>
<br/>
<input type="text" ng-model="keyToRead"/><br/>
<h3>Value from cache: {{readFromCache(keyToRead)}}</h3>
<h3>Cache Stats: </h3>{{getCacheStats()}}
</div>
and this is the controller
eventsApp.controller('CacheSampleController',
function CacheSampleController($scope, myCache) {
$scope.addToCache = function(key, value) {
myCache.put(key, value);
};
$scope.readFromCache = function(key) {
return myCache.get(key);
};
$scope.getCacheStats = function() {
return myCache.info();
};
}
);
im not sure if it could be a syntax error or something else that im just not seeing?
thanks
Add the ng-app to the htm elemvent
<html ng-app="eventsApp">
Load your js files in this order
<script src="app.js"></script>
<script src="script.js"></script>
And your service should look like this
var eventsApp = angular.module('eventsApp', [])
.factory('myCache', function($cacheFactory) {
return $cacheFactory('myCache', {capacity:3});
});
Check this: plnkr
You must include (CacheSampleController.js) to your page like this:
<script src="/js/controllers/CacheSampleController.js"></script>
Add it after (app.js) line and I am sure it will work.