コントローラでanglejsのテキストボックス値にアクセスする

Question

私はAngularJSを学び、HTTPサービスを呼び出すときにボタンクリック後にユーザーが入力したテキストボックスのテキスト値を渡して文字列url値に追加する際に助けが必要です。

私は次のように追加しようとしていますが、テキストボックスからユーザーが入力したテキストでURlを追加している間、私には未定義の値が表示されています。ここで

は、誰もが、ユーザが入力した正しい値を取得する方法についてこの点で私を助けることができる私のHtmlPage1.html

   <form ng-submit="abc(inputValue)"> 
        <input type="text" name="name" ng-model="inputValue" /> 
        <button type="submit">Test</button> 
       </form> 

と私のスクリプトファイルScript.js

  var app = angular.module("repos", []) 
      .controller("reposController", function ($scope, $http, $log) { 
       $scope.inputValue = null; 
       $scope.abc = function (value) { 
        $scope.inputValue = value; 
       }; 

       $http({ 
        method:'GET', 
        url:  'https://api.github.com/users/'+$scope.inputValue+'/repos' 
       }) 
         .then(function (response) { 
          $scope.repos = response.data; 
          $log.info(response); 
         }); 
      }); 

ですURLに追加するには？

ありがとうございます。

Answer 1

あなたが値を入力する前にあなたの電話をかける。 inputValueでAPIを呼び出すには、ボタンをクリックしてgetコールを配置します。

また、inputValueをHTMLの関数に渡す必要はありません.Angularの2ウェイバインディングがその役割を果たします。

例： HTML

<form ng-submit="abc()"> 
    <input type="text" name="name" ng-model="inputValue" /> 
    <button type="submit">Test</button> 
</form> 

JS：

var app = angular.module("repos", []) 
       .controller("reposController", function ($scope, $http, $log) { 
        $scope.inputValue = null; 
        $scope.abc = function() { 
         $log.info($scope.inputValue) // you will have your updated value here 
         $http({ 
         method:'GET', 
         url:  'https://api.github.com/users/'+$scope.inputValue+'/repos' 
        }) 
        .then(function (response) { 
         $scope.repos = response.data; 
         $log.info(response); 
        }); 
       }); 
}; 

私はこのことができます願っています。

Answer 2

2ウェイバインドのおかげで、コントローラにコードがあることを覚えておいてください。

ここでモデルのオブジェクトを設定します。その後、広告を使用してデータを送信することができます。

あなたは私が例を作っ説明しようとしていますかを理解するためには、私はそれはあなたのコードで

を支援願っています：
はinputタグ

<input type="text" name="name" ng-model="vm.data.inputValue" /> 

にNG-モデルを設定します。お使いのコントローラで

はその後ngのクリックを使用してそれを送信する機能を使用

vm.data ={}; 

私の例のように、それを利用できるようにします。

<button type="submit" ng-click="vm.submit()">Test</button> 

私は確かにこれを行う方法があります。

私は良いことではないよ、私は願っていることを、例を作ったので、説明することができます： https://jsfiddle.net/moplin/r0vda86d/

• 私の例では、基本的には同じですが、私は$スコープを使用しません。