将ng-model绑定到按钮值

Question

我试图绑定这两个按钮的值 - "是"和"否" - 当点击formData使用ng-model但没有运气时.有没有办法实现这一目的而不是使用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(){
    };
  }]);

Answer 1

ng-model仅适用于接受用户输入的元素,不包括按钮.如果要在单击按钮时设置值,可以将其设置为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>

或者将它们放在一个函数中

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

希望有所帮助