CODEWITHSUNDEEP
angularjsangular-ngmodel
bhood
bhood

Reputation: 355

Bind ng-model to button value

I am trying to bind the value of these two buttons–"Yes" and "No"– when clicked to formData using ng-model but having no luck. Is there a way to achieve this other than using 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>

Here's my controller: 

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

Upvotes: 3

Views: 18032

Answers (2)

Nick Boyko
Nick Boyko

Reputation: 21

It is more convenient to use the attribute "btnRadio" of the button control.

<button
  btnRadio="true"
  ng-model="formData.yesPool">Yes
</button>

<button
  btnRadio="false"
  ng-model="formData.yesPool">No
</button>

In the controller: formData.yesPool = "true" or "false"

Upvotes: 0

masterpreenz
masterpreenz

Reputation: 2290

ng-model only works on elements that accept user input, button is not included. If you want to set a value when the button is clicked you can just put it on ng-click:

<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 put those in a function instead

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

hope that helps

Upvotes: 8

Related Questions