ng-modelの値をhttpパラメータにバインドします

ユーザー入力に基づいてどの場所の天気を表示しようとしています。そのために、入力として任意の場所を取る入力フィールドを作成しました。そのために私は、ユーザー入力を結合して、$ HTTPパラメータフィールドに配置するng-modelの値をhttpパラメータにバインドします

NG-モデル

ディレクティブを使用していました。

アプリは、ユーザーの入力に基づいて天気を表示することになっていたはずだった。もし誰かが私のコードを見て、私が間違っていたことを教えてくれればと感謝します。

htmlコード：

<!DOCTYPE html> 
<html> 
<script data-require="[email protected]" 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：コントローラは "controllerAs" 構文でインスタンス化されている場合

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; 

     }); 
    }; 

});

出典

2017-04-07 Ufomammut

、thisコンテキストを使用して、$scopeを使用しないでください。テンプレートで

：

<div ng-controller="DemoCtrl as vm"> 
    <form> 
    <!-- WRONG 
    Location: <input type="text" ng-model="location" value="Paris"> 
    <button type="button" ng-click=submit()>Submit</button> 
    </form> 
    --> 
    <!-- RIGHT --> 
    Location: <input type="text" ng-model="vm.location" value="Paris"> 
    <button type="button" ng-click=vm.submit()>Submit</button> 
    </form>

JS：それはNG-モデルディレクティブでvm.locationだけでなくlocationである理由

var vm = this; 
    //vm.location = location; 

    //$scope.submit = function(){ 
    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' 
     } 
    };

あなたが説明してもらえますか？コントローラは「controllerAs」構文でインスタンス化され

は、$compile serviceは、指定された名前を持つ$scopeオブジェクトのプロパティに、コントローラのthisコンテキストをバインドします。コントローラーthisコンテキストのプロパティーを参照するには、テンプレートは、それらのプロパティー名の前に "controllerAs"バインディングで指定された名前を付ける必要があります。

AngularJSチームは、「ベストプラクティス」always have a '.' in your ng-models —を3分視聴することをお勧めします。 Miskoはng-switchとの初期バインディングの問題を示しています。詳細については

は、AngularJS Wiki - Understanding Scopes.

出典

2017-04-07 23:11:55 georgeawg

おかげでたくさんの@georgeawgを参照してください。 ng-model指令の "location"だけでなく、なぜ "vm.location"であるのか説明できますか？ – Ufomammut

ng-modelの値をhttpパラメータにバインドします

答えて

関連する問題