如何将数据绑定到ng-keyup对应的函数？附$event.key取值示例

嘿，我来帮你搞定这个问题！在AngularJS里，把数据绑定到ng-keyup对应的函数其实很简单，我给你两种最常用的实现方式，适配你提到的获取按键值（比如a、b）的场景：

方式一：传递$event到函数，绑定按键值到数据模型 #

这种方式适合你需要单独处理每个按键值，并把它绑定到页面上的场景：

1. 模板（HTML）代码 #

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-keyup="handleKeyUp($event)" placeholder="随便按几个键试试">
  <p>你按下的按键依次是：{{ pressedKeys }}</p>
</div>

2. 控制器（JS）代码 #

angular.module('myApp', [])
.controller('myController', function($scope) {
  // 初始化用来存储按键值的变量
  $scope.pressedKeys = '';
  
  $scope.handleKeyUp = function(event) {
    // 拿到你需要的按键值，比如a、b
    var valp = event.key;
    // 把按键值绑定到$scope变量，视图会自动更新
    $scope.pressedKeys += valp + ' ';
  };
});

这样每次你按下按键，pressedKeys就会追加对应的按键值，页面上的<p>标签会实时显示出来。

方式二：结合ng-model绑定输入框完整值 #

如果你不仅需要按键值，还需要获取输入框的完整内容，可以用ng-model先绑定输入框，再在ng-keyup的函数里处理：

1. 模板（HTML）代码 #

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="inputContent" ng-keyup="handleInputKeyUp($event)" placeholder="输入点内容试试">
  <p>当前输入框内容：{{ inputContent }}</p>
  <p>最后一次按下的按键：{{ lastKey }}</p>
</div>

2. 控制器（JS）代码 #

angular.module('myApp', [])
.controller('myController', function($scope) {
  $scope.inputContent = '';
  $scope.lastKey = '';
  
  $scope.handleInputKeyUp = function(event) {
    // 记录最后一次按下的按键
    $scope.lastKey = event.key;
    // 这里可以直接用$scope.inputContent，它已经实时绑定了输入框的所有内容
    console.log('当前输入的完整内容：', $scope.inputContent);
  };
});

额外小技巧：过滤特定按键 #

如果你只想处理字母按键（比如你提到的a、b），可以在函数里加个判断：

$scope.handleKeyUp = function(event) {
  var valp = event.key;
  // 只保留字母按键
  if (/^[a-zA-Z]$/.test(valp)) {
    $scope.pressedKeys += valp + ' ';
  }
};

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