Google maps allows one to get the coordinates from the auto-complete library. I cannot seem to find a way of doing it with ngMap without involving the "controller as" syntax. I want to get the coordinates and output them to console with just $scope.
var app = angular.module("App", ["ngMap"]);
app.controller("MyCtrl", function ($scope, NgMap) {
$scope.placeChanged = function placeChanged() {
var place = this.getPlace();
console.log(place.place.geometry.location)
};
});
<html ng-app="App">
<script src="https://maps.google.com/maps/api/js?libraries=places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-controller="MyCtrl">
<input type="text" name="address" places-auto-complete ng-model="address" on-place-change="placeChanged()">
</div>
</html>
Directive places-auto-complete has on-place-changed in NgMap
html:
<div ng-controller="MyCtrl">
<input places-auto-complete ng-model='address' on-place-changed="getCoords()" />
</div>
Script: when the place changes ng-model is updated and the
var app = angular.module("App", ["ngMap"]);
app.controller("MyCtrl", function($scope, NgMap) {
$scope.address = '';
$scope.getCoords = function() {
NgMap.getGeoLocation($scope.address).then(function(latlng) {
console.log(latlng.lat());
console.log(latlng.lng());
});
};
})
Related
I'm a beginner of AngularJS, and I cannot solve the problem of the title. If we push the button changeText in the following code, the text of the textarea will change. But this event doesn't happen if we push the button changeTextNew which is added by pushing another button addNewButton`.
html
<div ng-app="app" ng-controller="MainCtrl">
<input name="widget.title" ng-model="widget.title"><br>
<input type="button" ng-click="setText()" value="changeText"><br>
<input type="button" id="piyo" value="addNewButton">
<div id="fuga"></div>
</div>
js
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.widget = { title: 'before' };
$scope.setText = function() {
this.widget.title = "after"
}
});
$(document).on('click', '#piyo', function() {
$('#fuga').append("<input type='button' ng-click='setText()' value='changeTextNew'><br>")
})
https://jsfiddle.net/sn512/guqjatt6/
Try to avoid using jQuery together with AngularJS.
Try this:
angular.module('app', [])
.controller('MainCtrl', function($scope, $compile) {
$scope.widget = { title: 'before' };
$scope.setText = function() {
this.widget.title = "after"
}
$(document).on('click', '#piyo', function() {
$("#fuga").append($compile("<input type='button' ng-click='setText()' value='changeTextNew'><br>")($scope));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<input name="widget.title" ng-model="widget.title"><br>
<input type="button" ng-click="setText()" value="changeText"><br>
<input type="button" id="piyo" value="addNewButton">
<div id="fuga"></div>
</div>
I am new to angularjs.
I tried to create 2 different modules in an single js file and them manually bootstrap one of them to a element. This was suggested in one of the stackoverflow questions. But this doesnot seem to work.
Both of the modules work fine independently.
I am not sure what is going wrong here.
Here's my code :-
myApp.js
var app = angular.module("myApp", []);
var myController = app.controller("ctrl1", function($scope){
"use strict";
$scope.fname = "Bill";
$scope.lname = "Goldberg";
$scope.updatevalue = function () {
$scope.fullname = $scope.fname + $scope.lname;
//$scope.fname = "newName"
};
});
app.directive("w3TestDirective", function() {
"use strict";
return {
template : "<h1>This is my life!</h1>"
};
});
var loginController = angular.module('loginController', []);
loginController.controller('loginCntrl', function ($scope) {
"use strict";
$scope.username="email";
$scope.password="password";
$scope.present = false;
$scope.login = function () {
"use strict";
if ($scope.username == "Amar" & $scope.password == "Amar") {
$scope.present=true;
$scope.loginMessage = "logged in successfully";
} else {
$scope.present=true;
$scope.loginMessage = "Invalid username or password";
}
}
});
angular.bootstrap(document.getElementById("loginDiv"),['loginController']);
Index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script-->
<script src="scripts/services/myApp.js"></script>
<!--script src="scripts/services/login.js"></script-->
<body>
<div id="demoDiv" ng-app="myApp" ng-controller="ctrl1">
<span>Values:</span>
<input type="text" ng-model="fname"/>
<input type="text" ng-model="lname"/>
<button ng-click="updatevalue()">fullname</button>
<br></br>
{{ fullname }}
<br></br>
<w3-test-directive></w3-test-directive>
</div>
<br></br>
<div id="loginDiv" ng-app="loginController" ng-controller="loginCntrl">
<input type="text" ng-model="username"/>
<input type="text" ng-model="password"/>
<button ng-click="login()">submit</button>
<br></br>
<div ng-if="present"> {{ loginMessage }} </div>
</div>
</body>
</html>
This is the completely wrong approach. You CAN have your controllers in more than one module, but you should always have a single module which is the main parent for the app.
Let's Assume myApp is your parent module, and make some changes:
First, move the ng-app to the body element:
<body ng-app="myApp">
<div id="demoDiv" ng-controller="ctrl1">
...
Next, remove ng-app from the loginDiv:
<div id="loginDiv" ng-controller="loginCntrl">
Finally, inject the loginController module into the myApp module:
var app = angular.module("myApp", ['loginController']);
Now, the app will be able to attach both controllers without issue.
http://plnkr.co/edit/rkFY0ASCHaQUTByaHJg3?p=preview
I fixed my issue with the following code :-
var app = angular.module("myApp", ['utilModule','loginModule']);
var myController = app.controller("ctrl1", function($scope){
"use strict";
$scope.fname = "Bill";
$scope.lname = "Goldberg";
$scope.updatevalue = function () {
$scope.fullname = $scope.fname + $scope.lname;
//$scope.fname = "newName"
};
});
app.directive("w3TestDirective", function() {
"use strict";
return {
template : "<h1>This is my life!</h1>"
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script-->
<script src="scripts/services/myApp.js"></script>
<script src="scripts/services/util.js"></script>
<script src="scripts/services/login.js"></script>
<body ng-app="myApp">
<div id="demoDiv" ng-controller="ctrl1">
<span>Values:</span>
<input type="text" ng-model="fname"/>
<input type="text" ng-model="lname"/>
<button ng-click="updatevalue()">fullname</button>
<br></br>
{{ fullname }}
<br></br>
<div ng-controller="utilCntrl">
{{ test }}
<testDirective></testDirective>
</div>
<w3-test-directive></w3-test-directive>
</div>
<br></br>
<div id="loginDiv" ng-controller="loginCntrl">
<input type="text" ng-model="username"/>
<input type="text" ng-model="password"/>
<button ng-click="login()">submit</button>
<br></br>
<div ng-if="present"> {{ loginMessage }} </div>
</div>
</body>
</html>
There is only 1 issue, the testDirective tag doesnot print anything on the browser. but that is not a requirement, so I will just ignore this for the time being.
I realize that this is what #Claies has posted. Claies, Thank you very much for your time and effort.
You can't use the ng-app directive and angular.bootstrap function to bootstrap you angular application. You either use ng-app or angular.bootstrap.
If you have two modules "myApp" and "loginController" like you do in your app, you must make "loginController" a dependency of "myApp". "myApp" will be your angular application module that you can add more dependencies, external or custom.
angular.module('myApp', ['loginController', 'ui-router', 'etc'...])
I've got a problem related to the visibility of a button. I have to hide a button when there is no text in the form field, and show it back when it's filled. I've got some code:
<div class="TextAreaCont">
<input ng-model="pageUrl" placeholder="Facebook Page URL" type="text">
</div>
<div class="ButtonCont" ng-show="ctrl.isButtonVisible()">
<button ng-click="ctrl.send()">Fetch data</button>
</div>
And I wrote it:
Facebook.controller('PageCtrl', ['$scope', function($scope){
$scope.isButtonVisible = function(){
if($scope.pageUrl){return true}else{return false}
};
Where is the problem?
To be honest, I've never leart JS and Angular.
Here is my solution
var Facebook = angular.module('Facebook', []);
Facebook.controller('PageCtrl', [function(){
var ctrl = this;
ctrl.isButtonVisible = function(){
if(ctrl.pageUrl){
return true;
}else{
return false;
}
};
ctrl.send = function(){
console.log('Page URL: ' + ctrl.pageUrl)
};
}]);
See Plunker for more details.
Few problems that I can spot in your original code:
when using controller as syntax, use 'this' keyword, not $scope inside your controller
ng-model="pageUrl" should be ng-model="ctrl.pageUrl"
Just FYI, isButtonVisible() will be evaluated on every digest cycle, so there no need for watchers of ng-change.
try this.
i put simple example.
var app = angular.module('app', []);
app.controller('TestController', function ($scope) {
$scope.display = false;
$scope.isButtonVisible = function(pageUrl){
if(pageUrl){
$scope.display = true;
}
else{$scope.display = false;}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="TestController">
<input ng-model="pageUrl" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)">
<div class="ButtonCont" ng-show="display">
<button ng-click="send()">Fetch data</button>
</div>
<input ng-model="pageUrl2" placeholder="Facebook Page URL" type="text" ng-change="isButtonVisible(pageUrl)">
<div class="ButtonCont" ng-show="pageUrl2">
<button ng-click="send()">Fetch data</button>
</div>
</div>
I have two textarea, I want to use the content on the first to update the second immediately the user clicks the textarea using ng-change. Bt when I click on the textarea, no update is made. Below is the two textarea
<textarea ng-change="content=emojiMessage.messagetext | colonToCode" placeholder="emoji..." ng-bind="emojiMessage.messagetext | colonToCode" id="messageInput"></textarea>
<input ng-hide="false" type="text" id="message" name="message" ng-model="content" value="{{content}}" />
What could be wrong?
Now the snippet is using ng-focus instead, but with the same function.
var app = angular.module('myApp', []);
app.filter('colonToCode', function(){
return function (data) {
return data + ' Something added by the filter';
};
});
app.controller('ctrl', function($scope, $filter) {
$scope.content = 'Something';
$scope.emojiMessage = {
messagetext: 'smilie face'
};
$scope.setContent = function(text){
$scope.content = $filter('colonToCode')(text);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="ctrl">
<textarea ng-focus="setContent(emojiMessage.messagetext)" placeholder="emoji..." ng-model="emojiMessage.messagetext" id="messageInput"></textarea>
<input ng-hide="false" type="text" id="message" name="message" ng-model="content" value="{{content}}" />
</div>
</div>
I am trying to implement a simple Angular file upload. I am already having a controller for that particular page as shown below:
app.controller('PageCtrl', function ($scope, $rootScope, $location, $routeParams, services, video) {
var videoID = ($routeParams.videoID) ? parseInt($routeParams.videoID) : 0;
var original = video.data;
original._id = videoID;
$scope.video = angular.copy(original);
$scope.video._id = videoID;
$scope.isClean = function() {
return angular.equals(original, $scope.video);
}
// Activates the Carousel
$('.carousel').carousel({
interval: 5000
});
// Activates Tooltips for Social Links
$('.tooltip-social').tooltip({
selector: "a[data-toggle=tooltip]"
})
});
My HTML looks like this
<div class="form-group">
<label class="col-md-4 control-label" for="Message">Message</label>
<div class="col-md-4">
<textarea class="form-control" id="Message" name="Message">Hi David...</textarea>
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for=""></label>
<div class="col-md-4">
<div class="checkbox">
<label for="-0">
<input ng-model="imagesModal" type="checkbox" name="" id="-0" value="1">
Upload Images
</label>
</div>
</div>
</div>
<!--Images Form Group-->
<div class="form-group" ng-show="imagesModal">
<input type="file" ng-file-select="onFileSelect($files)" >
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="Submit"></label>
<div class="col-md-4">
<button id="Submit" name="Submit" class="btn btn-primary">Submit</button>
</div>
</div>
I am trying to include Angular file upload controller as shown in the answer. I tried
app.controller('PageCtrl', ['$scope', '$upload', function ($scope, $rootScope, $location, $routeParams, services, video) {
var videoID = ($routeParams.videoID) ? parseInt($routeParams.videoID) : 0;
var original = video.data;
original._id = videoID;
$scope.video = angular.copy(original);
$scope.video._id = videoID;
$scope.isClean = function() {
return angular.equals(original, $scope.video);
}
$scope.onFileSelect = function($files) {
var file = $files[0];
if (file.type.indexOf('image') == -1) {
$scope.error = 'image extension not allowed, please choose a JPEG or PNG file.';
}
if (file.size > 2097152){
$scope.error ='File size cannot exceed 2 MB';
}
$scope.upload = $upload.upload({
url: upload.php,
data: {fname: $scope.fname},
file: file,
}).success(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
};
// Activates the Carousel
$('.carousel').carousel({
interval: 5000
});
// Activates Tooltips for Social Links
$('.tooltip-social').tooltip({
selector: "a[data-toggle=tooltip]"
})
}]);
I am getting . I tried declaring all the parameters too
app.controller('PageCtrl', ['$scope', '$upload', '$rootScope', '$location', '$routeParams', function ($scope, $rootScope, $location, $routeParams, services, video) {
But still the same error. So I removed all the declaration too. No use.
I have been struggling with it for the long time now. I am just starting with angular. No clue where I am wrong.
UPDATE:
var app = angular.module('videomandiApp', [
'ngRoute','youtube-embed','ngFileUpload'
]);
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="js/ng-file-upload.min.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="http://brandly.github.io/angular-youtube-embed/angular-youtube-embed.js"></script>
<script src="js/main.js"></script>