将 ng-model 值绑定到 http 参数中

Question

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.为此，我使用ng-model指令绑定用户输入并将其放置在 $http 参数字段中。

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: html代码：

<!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:应用程序.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;
      });
  };

});

Answer 1

If the controller is instantiated with "controllerAs" syntax, don't use $scope , use the this context.如果控制器使用“controllerAs”语法实例化，不要使用$scope ，使用this上下文。

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: 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?你能解释一下为什么是vm.location而不仅仅是 ng-model 指令中的location吗？

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.当使用“controllerAs”语法实例化控制器时， $compile 服务将控制器的this上下文绑定到具有指定名称的$scope对象的属性。 To reference properties of the controllers this context, the template should prefix those property names with the name specified in the "controllerAs" binding.要在this上下文中引用控制器的属性，模板应使用“controllerAs”绑定中指定的名称作为这些属性名称的前缀。

The AngularJS team recommends following the "best practice" of always have a '.' AngularJS 团队建议遵循始终使用“.”的“最佳实践” 。 in your ng-models — watch 3 minutes worth. 在你的 ng-models 中——观看 3 分钟。 Misko demonstrates the primitive binding issue with ng-switch . Misko 演示了ng-switch的原始绑定问题。

For more information, seeAngularJS Wiki - Understanding Scopes.有关更多信息，请参阅AngularJS Wiki - 了解作用域。

将 ng-model 值绑定到 http 参数中

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-04-07 23:11:55

将 ng-model 值绑定到 http 参数中

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-04-07 23:11:55

解决方案1
2 已采纳 2017-04-07 23:11:55