将 ng-model 绑定到按钮值答案

【问题标题】：Bind ng-model to button value将 ng-model 绑定到按钮值
【发布时间】：2017-08-30 22:50:13
【问题描述】：

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

【问题讨论】：

标签： angularjs angular-ngmodel

【解决方案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;
}

希望对你有帮助

【讨论】：