I wan to use ng-autocomplete with firebase have a look of my html
<!DOCTYPE html>
<html ng-app="Test">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"href="style.css">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="script.js"></script>
<script src="ngAutocomplete.js"></script>
</head>
<body>
<div ng-controller="TestCtrl">
<form id="form" role="form">
<div class="form-group move-down">
<label for="Autocomplete">Generic Autocomplete</label>
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1"/>
</div>
<div>result: {{result}}</div>
</form>
</div>
</body>
</html>
and this is my script.js
angular.module( "Test", ['ngAutocomplete'])
.controller("TestCtrl",function ($scope) {
$scope.result1 = '';
$scope.options1 = null;
$scope.details1 = '';
});
and this is ngAutocomplete.js
angular.module( "ngAutocomplete", [])
.directive('ngAutocomplete', function($parse) {
return {
scope: {
details: '=',
ngAutocomplete: '=',
options: '='
},
link: function(scope, element, attrs, model) {
//options for autocomplete
var opts
//convert options provided to opts
var initOpts = function() {
opts = {}
//if (scope.options) {
/*if (scope.options.types) {
opts.types = []
opts.types.push(scope.options.types)
}*/
// }
}
initOpts()
//create new autocomplete
//reinitializes on every change of the options provided
var newAutocomplete = function() {
scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
if (scope.details) {
scope.details = scope.gPlace.getPlace();
}
scope.ngAutocomplete = element.val();
});
})
}
newAutocomplete()
//watch options provided to directive
scope.watchOptions = function () {
return scope.options
};
scope.$watch(scope.watchOptions, function () {
initOpts()
newAutocomplete()
element[0].value = '';
scope.ngAutocomplete = element.val();
}, true);
}
};
});
I want to use firebase autocomplete or array of city instead of google map API. So could you please give me idea how I can use it.
Instead of this
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1"/>
it should be
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result1" details="details1" options="options1" />
Please find working plunker here
see documentation of ngAutocomplete here
Related
I am new to angular.js. I have two directives in my main.js file and every directive has an input text field in the template. There is a Html page (index.html) where I want to use these directive's text fields with another input text field which is a Html input text field.
Now I want whatever input user gives in both the directive's text fields the character count should be calculated and the sum should be printed in the third text field which is a Html text field.
Code is given below:-
Main.js file code :
/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);
app.directive("textbox1", function() {
return {
restrict: 'E',
scope: {
timezone : "#"
},
template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval1' ng-change='updateval()' />{{txtval1.length}} </div>"
}
});
app.directive("textbox2", function() {
return {
restrict: 'E',
scope: {
timezone: "#"
},
template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval2' ng-change='updateval()'/>{{txtval2.length}} </div>"
}
});
app.controller("myCtrl", function ($scope) {
$scope.updateval = function () {
console.log($scope.txtval1.value);
$scope.txtThird = ($scope.txtval1.length) + ($scope.txtval2.length);
}
});
HTML Page Code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="myApp">
<textbox1></textbox1>
<textbox2></textbox2>
<br/><br/>
<input type="text" ng-model="txtThird"/>
</div>
<script src="scripts/angular.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
You need to do something like this:
var app = angular.module("myApp", []);
app.directive("textbox1", function() {
return {
restrict: 'E',
scope: {
timezone : "#",
updateval: "&updateval"
},
template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval1' ng-change=\"updateval({inputNr:'1', textval: txtval1})\" />{{txtval1.length}} </div>",
}
});
app.directive("textbox2", function() {
return {
restrict: 'E',
scope: {
timezone: "#",
updateval: "&updateval"
},
template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval2' ng-change=\"updateval({inputNr:'2', textval: txtval2})\" />{{txtval2.length}} </div>"
}
});
app.controller("myCtrl", function ($scope) {
$scope.inputValues = [
{
input: '1',
value: ''
},
{
input: '2',
value: ''
}
];
$scope.updateval = function (inputNr, txtval) {
var updatedInput = _.find($scope.inputValues, {input: inputNr});
updatedInput.value = txtval;
var lengthSum = 0;
angular.forEach($scope.inputValues, function(inputObj){
lengthSum += inputObj.value.length;
});
console.log(lengthSum);
}
});
Here is working: https://codepen.io/neptune01/pen/bWzLvq
Note that I used lodash.
If I understand you need something this:
//index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<textbox length="length1"></textbox>
<textbox length="length2"></textbox>
<br/><br/>
<input type="text" ng-model="txtThird"/>
<p>Sum = {{length1+length2}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
//script.js
'use strict';
var app = angular.module("myApp", []);
app.directive("textbox", function() {
return {
restrict: 'E',
scope: {
length: '='
},
controller: function($scope){
},
template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval' ng-change='length = txtval.length'/>{{txtval.length}} </div>"
}
});
app.controller("myCtrl", function ($scope) {
$scope.txtThird = "some text";
$scope.length1 = 0;
$scope.length2 = 0;
$scope.updateval = function () {
console.log($scope.txtval1.value);
$scope.txtThird = ($scope.txtval1.length) + ($scope.txtval2.length);
}
You can try it on plunker: https://plnkr.co/edit/XE6OcQX5GOJIPMcVHWum?p=preview
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 am trying to create a custom directive which takes a username as an input. It then validates and checks if the username is available or not. If the username is not available I want to pass some values back to the parent Controller.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="AppCtrl">
<div> From Controller : <input type="text" ng-model="ctrlRole"></div><br>
{{parentVariable}}
<input type="text" is-unique="{url: 'http://WWW.GOOGLE.COM'}" ng-model="role"/>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app = angular.module('mainApp', []);
app.controller("AppCtrl", function($scope){
$scope.ctrlRole = "Development";
$scope.parentVariable = "a";
});
app.directive("isUnique", function() {
return {
restrict : 'A',
require : 'ngModel',
transclude: 'true',
scope:{
parentVariable:"="
},
link : function(scope, element, attrs, ngModel) {
element.bind('blur', function (e) {
if (!ngModel || !element.val()) return;
var keyProperty = scope.$eval(attrs.isUnique);
console.log('this is the keyProperty we have received from the front end ' + keyProperty.url);
var currentValue = element.val();
console.log('this is the data we are going to validate ' + currentValue);
if(currentValue == 'AE'){
console.log('Changing the value ');
scope.parentVariable = 'b';
}
});
}
}
});
</script>
</body>
In summary I am trying to change the value of parentVariable from the directive scope depending on some conditions but its not happening, please let me know what I am doing wrong.
You specify the isolate scope parameter parentVariable, but in the template there is no value passed to it:
<input type="text" is-unique="{url: 'http://WWW.GOOGLE.COM'}" ng-model="role"/>
You would need:
<input type="text" is-unique="{url: 'http://WWW.GOOGLE.COM'}" parent-variable="parentVariable" ng-model="role"/>
Here, is an isolated example.
var app = angular.module('test', []);
app.controller('MainCtrl', function($scope) {
$scope.foo = 'foo';
});
app.directive('testDir', function($timeout) {
return {
restrict: 'A',
scope: {
val: '='
},
link: function(scope) {
console.log(scope.val);
$timeout(function() {
scope.val = 'bar';
}, 1000);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="MainCtrl">
{{foo}}
<div test-dir val="foo"></div>
</div>
</div>
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 am pretty new to AngularJS and I am stuck on a project for a client. I need to have multiple textareas on a page and have the last active one populate with text when I press a button. I found a plunker that does what I need with an input and a single textarea but when I add an extra textarea, I either end up populating both textareas or just one.
Plunker that I'm trying to edit:
var app = angular.module('plunker', []);
app.controller('MyCtrl', function($scope, $rootScope) {
$scope.items = [];
$scope.add = function() {
$scope.items.push($scope.someInput);
$rootScope.$broadcast('add', $scope.someInput);
}
});
app.directive('myText', ['$rootScope',
function($rootScope) {
return {
link: function(scope, element, attrs) {
$rootScope.$on('add', function(e, val) {
var domElement = element[0];
if (document.selection) {
domElement.focus();
var sel = document.selection.createRange();
sel.text = val;
domElement.focus();
} else if (domElement.selectionStart || domElement.selectionStart === 0) {
var startPos = domElement.selectionStart;
var endPos = domElement.selectionEnd;
var scrollTop = domElement.scrollTop;
domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
} else {
domElement.value += val;
domElement.focus();
}
});
}
}
}
])
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<input ng-model="someInput">
<button ng-click="add()">Add</button>
<p ng-repeat="item in items">Created {{ item }}</p>
</div>
<textarea my-text="">
</textarea>
</body>
</html>
I'm not sure if I need to keep the $on that's in the fiddle or use $watch instead. Also, I think I should be using document.activeElement somewhere in there or not. Any help or snippets explaining what to be done would be much appreciated
A quick prototype, if this match what you are looking for, please note that it is only a draft and should be refactored properly. I would refrain from using DOM element attribute too much in Angular and injecting rootScope just for one simple boardcasting is somewhat overkill.
<html>
<head>
</head>
<body ng-app="App" ng-controller="MyCtrl">
<input type="text" ng-model="input">
<span ng-bind="input"></span>
<button ng-click="populate()">Populate</button>
<textarea my-text></textarea>
<textarea my-text></textarea>
<textarea my-text></textarea>
<textarea my-text></textarea>
<script src="angular.js"></script>
<script>
(function(){
angular.module("App",[])
.value('TextManager', {
lastActive: -1,
texts: []
})
.controller('MyCtrl', function($scope, TextManager){
$scope.input = '';
$scope.populate = function(){
console.log(TextManager.texts[TextManager.lastActive]);
if (TextManager.texts[TextManager.lastActive])
TextManager.texts[TextManager.lastActive][0].value += $scope.input;
};
})
.directive("myText", function(TextManager){
return {
restrict: "A",
scope: [],
link: function(scope, element, attr){
TextManager.texts.push(element);
scope.index = TextManager.texts.length-1;
element.index = scope.index;
element.on('click', function(event){
TextManager.lastActive = scope.index;
});
}
};
});
})();
</script>
</body>
</html>