I need to call a function from my html page then using the div content as the parameter.
Angular Code (.js file)
$scope.foo = function(url) {
console.log(url);
};
.html file
<span ng-click="foo(t.ticketId)">
<div>
ThisIsTheOutput
</div>
</span>
what i am getting now is undefined. Help please!!
Related
I have the below code to pull the weather forecast. How do I make the zip code within the url as variable. I have done this in simple javascript by breaking down the url to substrings and then passing then in the get method but that is not working in AngularJS. Please help.
JS code
controllers.weatherCtrl= function ($scope,$http) {
$scope.getWeather=function() {
$http.get('http://api.openweathermap.org/data/2.5/forecast?zip=60007&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
.then(function(response){
$scope.weatherdata=response.data;
});
};
};
Index.html
<div class="container border">
<input ng-model="zip">
<button class="btn" ng-click="getWeather()">Get Weather</button>
<br>
<span>{{weatherdata.city.name + ', ' + weatherdata.city.country}}</span>
</div>
You would need to add in a parameter to the weatherCtrl function and add that to variable to the URL. Then you call the function with the parameter.
JS code
controllers.weatherCtrl= function ($scope,$http) {
$scope.getWeather=function(zipcode) {
$http.get('http://api.openweathermap.org/data/2.5/forecast?zip='+zipcode+'&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
.then(function(response){
$scope.weatherdata=response.data;
});
};
};
Index.html
<div class="container border">
<input ng-model="zip">
<button class="btn" ng-click="getWeather(zip)">Get Weather</button>
<br>
<span>{{weatherdata.city.name + ', ' + weatherdata.city.country}}</span>
</div>
If you create the url, then Mark S's answer is the correct one. if you receive the url from somewhere and you have to parse it and extract the zip code, you can use a regex match
url.match(/(?<=zip\=)\d*(?=\&)/g)
being url the url string.
I have a div-layer which dynamically loads html-partials from the server. The template variable is changed when a link in the navigation is clicked.
<div id="ajaxwrapper" ng-include="template">
</div>
This works fine. But the templates need a short time to load and during that time the user doesn't get any kind of response. Thats why I want to display a spinner until the template is load. Sadly I don't know how.
My links look something like this:
<a ng-click="navi($event)" href="www.someurl.de">Text</a>
The navi-function looks like this:
$scope.navi = function (elem) {
elem.preventDefault();
var urlstring = "";
if (typeof elem.target.href !== 'undefined') {
urlstring = elem.target.href;
$location.path(elem.target.pathname).search({ knt: $scope.aktuellesVertragskonto.nr });;
} else {
urlstring = elem.target.baseURI
$location.path("/");
}
$scope.template = $location.absUrl();
};
I need some pointers on how to implement a spinner. Thank you :)
The spinner-template would look like this:
<script type="text/ng-template" id="loader">
<div class="text-center">
<img src="~/images/spinner/ajax-loader.gif" /><br />
Loading
</div>
The ng-include directive includes an onload expression (reference), so you can do something like this:
<div id="ajaxwrapper"
ng-show="loaded"
ng-include="template" onload="loaded = true">
</div>
<div class="text-center"
ng-hide="loaded">
<img src="~/images/spinner/ajax-loader.gif" /><br />
Loading
</div>
There is another way as well, as ng-include override inside div html so you can show loader till template loads.
You can put loader inside the div as below.
<div id="ajaxwrapper" ng-include="template">
// Show loader image or css
</div>
I want to pass value of scope variable returned from controller in html window.open, but the problem is i get some garbage value, please see the code below.
<header>
<span class="item-title">{{x.name}}</span>
<span class="list-item-note-sendmoney1" onclick="window.open('tel:{{x.phone}}', '_system')"><ons-icon icon="ion-android-call"></ons-icon></span>
</header>
<p class="swipe-item-desc">{{x.phone}}</p>
I want to pass {{x.phone}} to window.open('tel:') function.
Don't use onclick. Use ng-click. And put the JS code in the controller:
ng-click="openWindow()"
and in the controller
$scope.openWindow = function() {
window.open('tel:' + $scope.x.phone, '_system');
}
Using Anguar UI-Router, I have the following state configured:
angular.module('foos').config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('seeFoos', {
url: '/foos',
templateUrl: 'modules/foos/client/views/list-foos.client.view.html',
controller: 'FoosController',
resolve: {
initialData : function(Foos) {
return Foos.query();
}
}
});
}
]);
In my view, I use ng-repeat to load some images by getting the image name from a service.
<section>
<div class="row">
<div class="col-xs-12 col-sm-6 top15"
ng-repeat-start="foo in bar">
<h4 ng-bind="foo.name"></h4>
<div class="row">
<a href="{{foo.link}}">
<img alt="{{foo.name}}" src="modules/foos/client/img/{{foo.imgName}}" class="col-xs-4" />
</a>
</div>
</div>
<div class="clearfix" ng-if="$index%2==1"></div>
<div ng-repeat-end=""></div>
</div>
</section>
Note that I ensure Foos.query() resolves before the template is loaded. The controller then loads the result to bar on the scope
angular.module('foos').controller('FoosController', ['$scope', '$stateParams', '$location', 'Foos', 'initialData',
function($scope, $stateParams, $location, Foos, initialData) {
$scope.bar = initialData;
}
]);
Everything works as expected, save for the following extra HTTP GET that returns a 404 error:
GET /modules/foos/client/img/%7B%7Bfoo.imgName%7D%7D
I don't understand why that request is being generated once I add the resolve option on the state configuration.
The main problem can be solved by using ng-src instead of src. From the documentation...
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
Secondly, your resolve function does not wait for the query to complete before completing the state load. This is by design in $resource actions...
It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.
If you do want it to wait, change the resolve to
resolve: {
initialData : function(Foos) {
return Foos.query().$promise;
}
}
And finally, you can simply use ng-if="$odd" instead of ng-if="$index%2==1".
I have next Angular JS controllers structure:
<div ng-controller="MainController">
<div ng-controller="mainCtrlTst">
// here is loaded HTML file
</div>
</div>
HTML file:
<div ng-controller="MainController">
<input ng-model="formData.map" value="">
</div>
For default formData.map containts address "USA, New York"
I have method Save() in MainController, but when I call this method I get:
console.log(formData.map); // undefined
How I can get value formData.map from input?
You should declare your model in controller like
$scope.formData = {
map: ''
};
And then use it in the view.
And then check in the save method by following code
console.log($scope.formData.map);
Hope you will not get undefined.
Try the following in MainController:
console.log($scope.formData.map);
To be more precise, in your save() function inside the controller do as follows:
$scope.save = function(){
console.log($scope.formData.map);
}
To know more about $scope, visit : https://docs.angularjs.org/guide/scope