如何在AngularJS中为按钮设置默认值并获取点击时的对应值？

没问题，这在AngularJS里其实很容易实现，我给你两种直观的方案，你可以根据自己的场景选择：

方案一：点击时直接传递预设值（最常用） #

这种方式最简单直接，通过ng-click指令在点击按钮时直接把预设值传递给控制器的处理函数：

HTML代码： #

<div ng-app="myApp" ng-controller="myCtrl">
  <button type="button" class="btn btn-default" ng-click="handleButtonClick('OK')">A</button>
  <button type="button" class="btn btn-default" ng-click="handleButtonClick('BYE')">B</button>
  <p>当前点击的按钮值：{{clickedValue}}</p>
</div>

JavaScript控制器代码： #

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // 初始化存储点击值的变量
  $scope.clickedValue = '';
  
  // 处理按钮点击的函数
  $scope.handleButtonClick = function(value) {
    $scope.clickedValue = value;
    // 这里可以添加你需要的其他逻辑，比如把值传给后端、做判断等
    console.log('点击的按钮值：', value);
  };
});

方案二：通过绑定变量预设值（适合需要动态修改值的场景） #

如果你的按钮值可能需要动态改变，可以先在控制器里预设值，再通过ng-click读取绑定的变量：

HTML代码： #

<div ng-app="myApp" ng-controller="myCtrl">
  <button type="button" class="btn btn-default" ng-click="handleButtonClick(buttonAValue)">A</button>
  <button type="button" class="btn btn-default" ng-click="handleButtonClick(buttonBValue)">B</button>
  <p>当前点击的按钮值：{{clickedValue}}</p>
</div>

JavaScript控制器代码： #

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // 预设按钮的默认值
  $scope.buttonAValue = 'OK';
  $scope.buttonBValue = 'BYE';
  $scope.clickedValue = '';
  
  $scope.handleButtonClick = function(value) {
    $scope.clickedValue = value;
    console.log('点击的按钮值：', value);
  };
});

说明： #

• ng-app用来定义AngularJS应用的范围，ng-controller绑定对应的控制器。
• ng-click指令会在按钮被点击时执行指定的函数，你可以在函数里对获取到的值进行任何你需要的处理。
• 两种方案的核心都是通过AngularJS的数据绑定机制，把预设值和点击事件关联起来，这样点击时就能轻松拿到你想要的内容。

内容的提问来源于stack exchange，提问作者Zerosero