javascript - Angular ng-keypress 事件来修改输入

Question

我想修改我的输入值并使用破折号分隔它-

<input type="text" ng-keypress="addHyphen($this)" id="sortcode" name="sortcode" maxlength="6" ng-model="data.branchTransitNumber" />

为了达到同样的效果，我编写了一个ng-keypress事件并尝试修改输入。

$scope.addHyphen = function(ele) {
   console.log(ele);
   //var ele = document.getElementById(sortcode)
   var finalVal = ele.match(/.{1,2}/g).join('-');
   document.getElementById(sortcode).value = finalVal;
}

代码给出ele为undefined. 我什至尝试通过想法来获取元素，但它也给出了undefined.

输入：11111

打字时：11-11-11

标签： javascriptangularjs

Answer 1

我不确定您是如何进入$this的，但事件处理程序仅通过$event

在按键时评估的表达式。（事件对象可用作 $event 并且可以查询 keyCode、altKey 等）

^{https://docs.angularjs.org/api/ng/directive/ngKeypress#ngKeypress-arguments}

获取元素的正确方法是angular.element($event.target)

像这样：

angular
  .module('app', [])
  .controller('ctrl', $scope => {
    $scope.addHyphen = $event => {
      const $this = angular.element($event.target);
      console.log($this);
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
   <input type="text" ng-keypress="addHyphen($event)" id="sortcode" name="sortcode" maxlength="6" ng-model="branchTransitNumber" />
</div>

参考：在 angularjs 中获取 $this