javascript - How do I update a view after ng-submit calls a factory function? -
$scope.temp , $scope.description don't have values until ng-submit calls $scope.getweather. can log values after submission, can't update view display them. $scope.test demonstrating view display "this default value" , not update "this new value" when $scope.getweather called. thanks.
angular.module('forecastctrl', ['weatherservice']) .controller('forecastcontroller', function($http, $scope, weather) { //var vm = this; $scope.test = 'this default value'; $scope.getweather = function(postdata) { weather.get(postdata) .success(function(data) { console.log(data); $scope.test = 'this new value'; $scope.temp = data.query.results.channel.item.condition.temp; $scope.description = data.query.results.channel.item.condition.text; }) .error(function(error) { console.log(error); }); event.preventdefault(); }; // form <form name="getweatherform" action="#" ng-submit="getweather(postdata)" class="small-10 large-6 small-centered large-centered columns"> <div class="row collapse"> <div class="small-9 columns"> <input type="text" placeholder="philadelphia, pa" ng-model="postdata.city"> </div> <div class="small-3 columns"> <button type="submit" class="button postfix">go</button> </div> </div> </form> //this factory angular.module('weatherservice', []) .factory('weather', function($http) { return { get: function(location) { location = location.city; location = location.replace(/\s/g, ''); // error handling return $http.get('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3d%22'+location+'%22)&format=json&env=store%3a%2f%2fdatatables.org%2falltableswithkeys'); } } }); // view <main id="content"> <div class="row"> <div class="small-12 large-12 columns"> <section class="wrapper"> {{ test }} <h1>{{ forecast.temp }}</h1> <h2>{{ forecast.description }}</h2> </section> </div> </div>
the code working, repsonse not have assumed properties when city not provided or wrong city provided. maybe use ng-required, code fail if postdata.city not set
http://plnkr.co/edit/7f3eumyaxtalbr9cgwb0?p=preview
.success(function(data) { console.log(data); $scope.test = 'this new value'; $scope.temp = data.query.results.channel.item.condition.temp;
Comments
Post a Comment