2017-08-30 9 views
0

formDataをクリックしてng-modelを使用しても運がない場合、これらの2つのボタンの値をバインドしようとしています - 「はい」と「いいえ」。 ng-modelを使用する以外にこれを達成する方法はありますか?ここでボタンの値にバインドする

<button class="" 
    ng-class="{'button--is-selected--turquoise': isSelected, 
      '' : isSelected===false}" 
    ng-click="isSelected = true" 
    ng-model="formData.yesPool">Yes 
</button> 

<button class="" 
    ng-class="{'button--is-selected--turquoise': 
    isSelected === false, 'notSelected' : isSelected }" 
    ng-click="isSelected = false" 
    ng-model="formData.noPool"">No 
</button> 

は私のコントローラです:

angular 
    .module('testApp') 
    .controller('formController', ['$scope', '$http', function($scope, $http) { 
    $scope.formData = {}; 
    $scope.processForm = function(){ 
    }; 
    }]); 

答えて

1

ng-modelは、ユーザの入力を受け付ける要素で動作し、ボタンが含まれていません。

<button class="" 
    ng-class="{'button--is-selected--turquoise': isSelected, 
      '' : isSelected===false}" 
    ng-click="isSelected = true; formData.yesPool = true">Yes 
</button> 

<button class="" 
    ng-class="{'button--is-selected--turquoise': 
    isSelected === false, 'notSelected' : isSelected }" 
    ng-click="isSelected = false; formData.noPool = true">No 
</button> 

をOR機能におけるそれらの代わりに

// HTML 
<button class="" 
    ng-class="{'button--is-selected--turquoise': isSelected, 
      '' : isSelected===false}" 
    ng-click="yesButtonIsClicked()">Yes 
</button> 

<button class="" 
    ng-class="{'button--is-selected--turquoise': 
    isSelected === false, 'notSelected' : isSelected }" 
    ng-click="noButtonIsClicked()">No 
</button> 

// JS 
$scope.noButtonIsClicked() 
{ 
    $scope.isSelected = false; 
    $scope.formData.noPool = true; 
}; 

$scope.yesButtonIsClicked() 
{ 
    $scope.isSelected = true; 
    $scope.formData.yesPool = true; 
} 

+0

確かにやったのに役立ちます希望を置く - :あなたはボタンがクリックされたときに値を設定したい場合は、単にng-clickの上に置くことができますありがとう@masterpreenz! – bhood

関連する問題