2017-08-30 1 views
0

Ich versuche, den Wert dieser beiden Tasten zu binden - "Ja" und "Nein" - wenn auf formData mit ng-model geklickt, aber kein Glück. Gibt es einen Weg dies zu erreichen, außer ng-model?Bind ng-model to button value

<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> 

Hier ist mein Controller:

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

Antwort

1

ng-model nur auf Elementen arbeitet, die Benutzereingaben akzeptieren, ist Taste nicht enthalten. Wenn Sie einen Wert festlegen möchten, wenn auf die Schaltfläche geklickt wird, kann man es nur auf ng-click setzen:

<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> 

sind oder in einer Funktion setzen stattdessen

// 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; 
} 

Hoffnung, die tat

+0

Sicher hilft - Danke @masterpreen! – bhood

Verwandte Themen