时间戳

首页 > 解决方案 > 如何通过单击按钮触发功能，该功能已设置为在 AngularJS 中使用“Enter”按键触发？

javascript - 如何通过单击按钮触发功能，该功能已设置为在 AngularJS 中使用“Enter”按键触发？

问题描述

所以我试图通过点击ENTER键旁边的按钮将产品添加到购物车（这是现在将产品添加到购物车的唯一方法），我尝试了很多次但不幸的是所有方法都可以根本不工作。这是一个用 AngularJS 构建的 POS 系统项目（我的经验非常薄弱）我需要把它做得很糟糕这里是 HTML 部分：

<tr>
    <td colspan="6" class="text-center">

        <input autofocus autocomplete="off" list="product-list"
               id="product-entry" type="text" class="form-control"
               name="product-reference" required/><br/>

        <button id="myButton" ng-click="" >Add Product to Sale</button>

        <datalist id="product-list">
            <option ng-repeat="item in inventory" value="{{ item.name }}">
            </option>
        </datalist>
    </td>
</tr>

当有人单击“myButton”时我需要做到这一点，我想我需要在 ng-click 指令中添加一些功能，但是欢迎任何其他方式

这是JS部分：

        // POS Section
pos.controller('posController', function ($scope, $routeParams, Inventory, Transactions) {

  $scope.barcode = '';

  function barcodeHandler (e) {

      $scope.barcodeNotFoundError = false;

      $scope.barcode = $('#product-entry').val();

      var regex=/^[0-9]+$/;

      // if enter is pressed
      if (e.which === 13) {

        if(!$scope.barcode.match(regex)){
          for(var i = 0; i < $scope.inventory.length; i++) {
            if($scope.inventory[i].name === $scope.barcode) {
              $scope.barcode = $scope.inventory[i].barcode;
              break;
            }
          }
        }

        if ($scope.isValidProduct($scope.barcode)) {
          $scope.addProductToCart($scope.barcode);
          $scope.barcode = '';
          $scope.productsList = '';
          $scope.$digest();
          $('#product-entry').val($scope.barcode);
        }
        else {
          window.alert('product not found: ' + $scope.barcode);
          console.log('invalid product: ' + $scope.barcode);
          // $scope.barcodeNotFoundError = true;
        }
      }
  }

  $('#product-entry').off('keypress').on('keypress', barcodeHandler);

标签： javascriptangularjs

解决方案

您正在做的是侦听字段上的 keyup 事件，如果该键与返回键匹配，它将继续您的逻辑。

如果你将逻辑移到它自己的函数中（在barcodeHandler之前），你可以在别处访问它：

$scope.doSomething = function() {
  $scope.barcodeNotFoundError = false;
  $scope.barcode = $('#product-entry').val();
  var regex=/^[0-9]+$/;

  if(!$scope.barcode.match(regex)){
    for(var i = 0; i < $scope.inventory.length; i++) {
      if($scope.inventory[i].name === $scope.barcode) {
        $scope.barcode = $scope.inventory[i].barcode;
        break;
      }
    }
  }

  if ($scope.isValidProduct($scope.barcode)) {
    $scope.addProductToCart($scope.barcode);
    $scope.barcode = '';
    $scope.productsList = '';
    $('#product-entry').val($scope.barcode);
  }
  else {
    window.alert('product not found: ' + $scope.barcode);
    console.log('invalid product: ' + $scope.barcode);
    // $scope.barcodeNotFoundError = true;
  }
};

然后在barcodeHandler中，使用：

if (e.which === 13) {
  $scope.doSomething();
}

现在在您的标记中，您可以执行以下操作：

<button id="myButton" ng-click="doSomething()">Add Product to Sale</button>

向控制器添加一些东西$scope是使其在视图中可用的一种方式。

推荐阅读