Recently delving into AngularJs and integrating it into my project, I created a WebApi function that retrieves a city's current temperature. I am seeking guidance on how to display this single temperature in my HTML file. While familiar with ng-repeat for displaying multiple items, I am uncertain of the approach for displaying a single item.
Upon inspecting my current code provided below, the expected result was to showcase "20" as the temperature, unfortunately, it displays "2" and "0" in separate rows. Can someone provide assistance on achieving the desired output of "20" in a singular 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>
After following @Sajeetharan's advice, there is now an unexpected image being displayed. How can I resolve this issue? What could be causing this anomaly? https://i.sstatic.net/gv1YI.png
Below is the remaining code section:
<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 for identifying the issue. The problem lied within {{weather}}
It should have been changed to {{weathers}}