binding ng-model value into http parameter

Issue

I am trying to show the weather of any location based on user input. For that I have created an input field which takes any location as an input. For that I have used ng-model directive to bind the user input and place it in $http parameter field.

The app was supposed to do was show the weather based on the user input. I would be grateful if anybody could look into my code and tell me what I did wrong.

html code:

<!DOCTYPE html>
<html>
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
</head>
<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as vm">

    <form>
      Location: <input type="text" ng-model="vm.location" value="Paris">
      <button type="button" ng-click=submit()>Submit</button>
    </form>
    <h1>{{ vm.data| json}}</h1>

  </div>

</body>

</html>

app.js:

var app = angular.module('jsbin', []);

app.controller('DemoCtrl', function($http) {

  var vm = this;     

  $scope.submit = function(){

    var URL = 'https://api.apixu.com/v1/current.json';
    var request = {
      method: 'GET',
      url: URL,
      params: { 
        q: vm.location,
        mode:'json',
        cnt:'7',
        units:'imperial',
        key:'1a17370dc8e34f09946231209170404' 
      }
    }; 

    $http(request)
      .then(function(response) {
        vm.data = response.data;            
      }).
      catch(function(response) {
        vm.data = response.data;
      });
  };

});

Solution

If the controller is instantiated with “controllerAs” syntax, don’t use $scope, use the this context.

In the template:

<div ng-controller="DemoCtrl as vm">
   <form>
      ̶L̶o̶c̶a̶t̶i̶o̶n̶:̶ ̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶t̶e̶x̶t̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶l̶o̶c̶a̶t̶i̶o̶n̶"̶ ̶v̶a̶l̶u̶e̶=̶"̶P̶a̶r̶i̶s̶"̶>̶
      Location: <input type="text" ng-model="vm.location" value="Paris">
      ̶<̶b̶u̶t̶t̶o̶n̶ ̶t̶y̶p̶e̶=̶"̶b̶u̶t̶t̶o̶n̶"̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶s̶u̶b̶m̶i̶t̶(̶)̶>̶S̶u̶b̶m̶i̶t̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
      <button type="button" ng-click=vm.submit()>Submit</button>
   </form>
</div>

JS:

var vm = this;

̶$̶s̶c̶o̶p̶e̶.̶s̶u̶b̶m̶i̶t̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶{̶
vm.submit = function() {    
    var URL = 'https://api.apixu.com/v1/current.json';
    var request = {
      method: 'GET',
      url: URL,
      params: { 
        //q:'vm.location',
        //USE variable
        q: vm.location,
        mode:'json',
        cnt:'7',
        units:'imperial',
        key:'1a17370dc8e34f09946231209170404' 
      }
}; 

Could you explain why is it vm.location and not only location in ng-model directive?

When controllers are instantiated with “controllerAs” syntax, the $compile service binds the this context of the controller to a property of the $scope object with the specified name. To reference properties of the controllers this context, the template should prefix those property names with the name specified in the “controllerAs” binding.

The AngularJS team recommends following the “best practice” of always have a ‘.’ in your ng-models — watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.

For more information, see AngularJS Wiki – Understanding Scopes.

Answered By – georgeawg

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published