コントローラのボタンクリック機能にドロップダウン選択値を渡すにはどうすればよいですか？

Question

私はユーザーの国選択ドロップダウンを持っています。選択された値を送信ボタンng-click = "saveChanges（）"に渡す必要があります。

これを行う適切な方法は何ですか？ユーザーがそのドロップダウンで選択した内容を知りたい。

Answer 1

私はAngularJSの例をコピーしました。 ng-model属性を使用する必要があります。これは、あなたがコントローラから変数に値をバインドすることができます：

HTMLコード：

<div ng-controller="ExampleController"> 
    <form name="myForm" ng-submit="submit()"> 
    <label for="repeatSelect"> Repeat select: </label> 
    <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect"> 
     <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option> 
    </select> 
    <input type="submit" id="submit" value="Submit" /> 
    </form> 
    <hr> 
    <tt>repeatSelect = {{data.repeatSelect}}</tt><br/> 
</div> 

コントローラクラス：

angular.module('ngrepeatSelect', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
    $scope.data = { 
    repeatSelect: null, 
    availableOptions: [ 
     {id: '1', name: 'Option A'}, 
     {id: '2', name: 'Option B'}, 
     {id: '3', name: 'Option C'} 
    ], 
    }; 
    $scope.submit = function() { 
    // Logic to handle onClick action by pressing the Button. 
    // The ng-model=repeatSelect saved your information to the 
    // variable repeatSelect. 
    var selectValue = $scope.data.repeatSelect; 
    // Do something with selectValue variable 
    } 
}]); 

それともng-clickメソッドを使用したい場合は、代わりに、HTML formを使用してください。そして、あなたは全体のform HTMLタグを削除する必要があり、ボタンに変更作られます：あなたはNG-モデルはその場で値を結合することを理解する必要が

<input type="submit" id="submit" value="Submit" ng-click="$scope.submit()" /> 

を。したがって、その値を段落に簡単に印刷することができます。ドロップダウンを変更すると、印刷された値が自動的に変更されます。

一般的には、最初に公式で試してみることをお勧めします。私の経験では、まずそれを読むことで多くの問題を解決することができます。

Answer 2

あなたが選択ボックスが変更された後、フォームを送信提出する関数を呼び出しますその選択にngChangeイベントをバインドする必要がある場合：

<select ng-model="myModel" ng-change="saveChanges()" ng-options="....">