AngularJS：サーバーにチェックボックス/ラジオボタンの値を送信します。

Question

サーバーにユーザーのアクティビティを送信します。私のmy previous questionでは、ng-clickケースに尋ねました。この質問は、チェックボックスとラジオボタンの場合についてです。

ユーザのアクティビティを記録するためにチェックボックスまたはラジオボタンのユーザがクリックしたサーバに送信します。

私はこのようにすることができます。

HTML：

<!-- for checkbox --> 
<div class="btn-group"> 
    <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label> 
    <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label> 
</div> 

<!-- for radio button--> 
<div class="btn-group"> 
    <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label> 
    <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label> 
</div> 

JS：

$scope.$watch('checkModel', function() { 
    sendServer("checkModel" + JSON.stringify(checkModel)); 
    // Do other things for checkModel 
}, true); 

$scope.$watch('radioModel', function() { 
    sendServer("radioModel" + radioModel); 
    // Do other things for radioModel 
}); 

function sendServer(msg) { 
    var req = new XMLHttpRequest(); 
    var params = "msg=" + encodeURIComponent(msg); 
    req.open("POST", "/scripts/log"); 
    req.send(params); 
} 

この方法では、すべてのwatchにsendServerを挿入するために私を必要とします。これは非効率的です。私はそれを一体的にしたいと思っています。それはできますか？

Answer 1

使用ng-click直接、代わりにダイジェストループを使用して、この方法は、あなただけのクリックのイベントで実行

Answer 2

あなたは、あなたはあなたの何を行うことができ、そこにモデル値を関数を実行し、注入するng-changeを使用することができます欲しい

<div class="btn-group"> 
    <label class="btn btn-primary" ng-model="checkModel.left" ng-change="run(checkModel)" uib-btn-checkbox>Left</label> 
    <label class="btn btn-primary" ng-model="checkModel.middle" ng-change="run(checkModel)" uib-btn-checkbox>Middle</label> 
    <label class="btn btn-primary" ng-model="checkModel.right" ng-change="run(checkModel)" uib-btn-checkbox>Right</label> 
</div> 

コントローラー：

$scope.run = function(item) { 
    console.log(item); // will print the model object 
    // run your sendServer function here 
} 

1. チェックボックスグループまたはラジオボタングループの両方から同じ関数を呼び出すと、別のitemが関数に解決され、検証（型チェック）を使用して関連データを取得できます。

2. この方法で$watchを書く必要はありません。ng-changeディレクティブがすでにあなたのためにラップしているためです。 ng-modelが必要です。