I am very new to AngularJs and trying to use it in my project. I made a WebApi function that returns a city's current temperature. From html, I want to get that single temperature and display it. I know ng-repeat is used to display many items but how to display a single item.
my current code is below. I expected to display "20" as temperature, but it displays "2" and "0" in two rows :) Please help. How can I display it as "20" in a single row?
<div ng-controller="WearherController">
<table ng-repeat="weather in weathers" border="1">
<tr>
<td>{{weather}}</td>
</tr>
</table>
</div>
....
....
....
<script>
var app = angular.module("ZenHaberApp", []);
app.controller("WeatherController", function ($scope, $http) {
var city = 'Adana';
$http.get('http://localhost:62747/api/getweatherbycityname/' + city).
success(function (data, status, headers, config) {
$scope.weathers = data.condition_temp;
}).
error(function (data, status, headers, config) {
alert("error");
});
});
</script>
I think #Sajeetharan gave me the solution but now it displays a silly image. What is it? How can I fix this?
here is the rest of the code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
var app = angular.module("ZenHaberApp", []);
app.controller("WeatherController", function ($scope, $http) {
var city = 'Adana';
$http.get('http://localhost:62747/api/getweatherbycityname/' + city).
success(function (data, status, headers, config) {
$scope.weathers = data.condition_temp;
}).
error(function (data, status, headers, config) {
alert("error");
});
});
</script>
SOLUTION:
thanks to #Sajeetharan, he found out the problem. It was {{weather}}
It should be {{weathers}}
You can directly assign the $scope variable weathers,
<table border="1">
<tr>
<td>{{weathers}}</td>
</tr>
</table>
DEMO
Related
I have a page where we get a list of users using angular $http from backend as shown below.
myApp.controller("MyCntrl", function ($scope, $http) {
$scope.users= [];
$scope.countries = function () {
$http.get(url).success(function (data, status, headers, config) {
return data;
});
};
$scope.getUsers = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.users= data;
});
};
});
And my html is like:
<div ng-app="myApp" ng-controller="MyCntrl" ng-init="getUsers()">
<p ng-repeat="user in users">{{user.UserName}}</p>
<select>
<option ng-repeat="country in countries">{{country.CountryName}}</option>
</select>
</div>
Everything is working fine up to displaying users.
But the code after ng-repeat of users is not working. I'm not able to see the list of countries in the dropdown.
I can see the json list of both users and countries in firebug.
Can anyone help me on this?
My countries Json is
[{CountryId:1,CountryName:"India"}]
What i've observed is that the angular code is not working after the first ng-repeat of users.
When i try to see the length of countries json like
<p>{{countries.length}}</p>
It is just printing {{countries.length}} in browser
You can set the returned data for $scope.countries just as you've done for $scope.users, except you don't need to define a function that you'd call in your view to get all the countries.
Instead, call this function in your controller which in turn will set the countries variable into the scope:
this.getCountries = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.countries = data;
});
};
// call the method to get the countries
this.getCountries();
Note that in your code you have return = data which might be causing a syntax error.
You will have to use ng-options instead in the case of <select>:
<select ng-model="selectedCountry" ng-options="country.countryName for country in countriesData">
</select>
Edit:
Replace this:
$scope.countries = function () {
$http.get(url).success(function (data, status, headers, config) {
return data;
});
};
By this:
$http.get(url).success(function (data, status, headers, config) {
$scope.countriesData = data;
});
NOTE: Checked that url is defined !
You have call function in ng-repeat that's why its not working properly.Correct code should be like below
myApp.controller("MyCntrl", function ($scope, $http) {
$scope.users= [];
$scope.getCountry = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.countries = data;
});
};
$scope.getUsers = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.users= data;
$scope.getCountry();
});
};
});
I have an Angular JS application in which some dynamic rows of data are loaded through a rest API. This section of html data are loaded very late after the whole page is loaded and hence looks bad.
HTML
<div class="row">
<div class="form-group" ng-repeat="rows1 in entity.pageSection1Rows">
<!-- Around five html columns -->
<!-- The CONTENTS here loads very late after the whole page is loaded -->
</div>
</div>
<div class="row">
<div class="form-group" ng-repeat="rows2 in entity.pageSection2Rows">
<!-- Around five html columns -->
<!-- The CONTENTS here loads very late after the whole page is loaded -->
</div>
</div>
Javascript
myApp.controller('createController', function($scope, $http, $location) {
$scope.entity = {};
$http.get("/restapi/serviceA")
.success(function(data, status, headers, config) {
$scope.entity.pageSection1Rows = data;
});
$http.get("/restapi/serviceB")
.success(function(data, status, headers, config) {
$scope.entity.pageSection2Rows = data;
});
// Rest APIs to load data for drop downs
$http.get("/restapi/dropdown1")
.success(function(data, status, headers, config) {
$scope.dropdown1 = data;
});
$http.get("/restapi/dropdown2")
.success(function(data, status, headers, config) {
$scope.dropdown2 = data;
});
$http.get("/restapi/dropdown3")
.success(function(data, status, headers, config) {
$scope.dropdown3 = data;
});
$http.get("/restapi/dropdown4")
.success(function(data, status, headers, config) {
$scope.dropdown4 = data;
});
$scope.add = function() {
$http.post("/restapi/entity", $scope.entity).success(function(data, status, headers, config, statusText) {
$location.path('/home');
}).error(function(data, status, headers, config, statusText) {
console.log("Error : " +statusText);
});
}
})
How i can use
perfectScrollbar('update');
with my this code in angular.js
$http.get('demo/json/test.json').
success(function(data, status, headers, config) {
$scope.items = data;
})
Any help please.
You can create a modal or just show a model in a DIV.
<div id="perfectView">
<div ng-repeat="item in items">
<p>{{item.name}}</p>
</div>
</div>
Then you can call your action;
$http.get('demo/json/test.json').
success(function(data, status, headers, config) {
$scope.items = data;
//init perfectScroll
$('#perfectView').perfectScrollbar();
})
I'm having a problem getting $http.post to fire:
app.controller('editPageController', function($scope, $routeParams, $http) {
$scope.page = $routeParams.pageid;
// get page data from server
$http.get('/pages/' + $scope.page).
success(function(data, status, headers, config) {
$scope.Name = data[0].name;
$scope.Content = data[0].content;
$scope.Location = data[0].location;
}).
error(function(data, status, headers, config) {
alert("Can't get the page from the server");
});
// save page data on the server
$scope.saveEditPage = function() {
var postOBject = {Name: $scope.Name, Content: $scope.Content, Location: $scope.Location};
$http.post('/pages/' + $scope.page + '/edit', postObject).
success(function(data, status, headers, config) {
alert("success");
}).
error(function(data, status, headers, config) {
alert("Can't edit the page on the server");
});
};
});
The template code:
<script type="text/ng-template" id="editPage.html">
<h1>Edit page:</h1>
<form ng-submit="saveEditPage()">
<p>Name:</p>
<input type="text" ng-model="Name" value="{{Name}}">
<p>Content:</p>
<textarea ng-model="Content">{{Content}}</textarea>
<p>Location:</p>
<input type="text" ng-model="Location" value="{{Location}}">
<p><input type="submit" value="Save"> <input type="button" value="Cancel" ng-click="$back()"></p>
</form>
Unfortunately the $http.post does not fire. I tried wrapping the post call around $scope.$apply and it didn't work either.
How can I fix this?
Thanks
EDIT: FIXED
JavaScript variable names are case sensitive. You have declared postOBject but you are passing postObject.
ReferenceError: postObject is not defined
If I correct the typo, it's working as expected for me.
BTW I recommend using IDE with static analysis - it will inform you about undefined variables immediately. Also Firebug or Chrome DevTools javascript console are almost absolutely necessary for javascript development.
I would like to load the content of one of two JSON files, food1.json or food2.json. I am trying to do this from the html template:
<body ng-controller="MainCtrl" ng-init="init('food1')">
And then in the JS:
$scope.init = function (name) {
$scope.name = name;
$scope.category = name + ".json";
$scope.foodlist = {};
$http({
method: 'GET',
url: $scope.category,
}).success(function (data, status, headers, config) {
{
$scope.foodlist = data;
}
}).error(function (data, status, headers, config) {
// something went wrong :(
});
};
});
The category name is properly assembled: I get "I am food1" if I print I am {{ category }}. But no food items are printed. I think I am doing the JSON call wrong.
Here's my Plunkr
You have not injected $http in the controller. Change you code as
app.controller('MainCtrl', function($scope, $http) {
instead of
app.controller('MainCtrl', function($scope) {
DEMO