angularjs - 将 ng-model 绑定(bind)到按钮值

Question

我正在尝试使用 ng-model 点击到 formData 时绑定(bind)这两个按钮的值——"is"和“否”，但没有运气。除了使用 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>

这是我的 Controller :

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

希望对你有帮助