简体   繁体   English

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

[英]How I can trigger a function with a button click which is already set to be triggered with "Enter" Key press in AngularJS?

So I was trying to make it possible to add a product to the cart by a button click beside the ENTER key press(which is now the only way to add a product to the cart), I have tried many times but unfortunately all ways does not work at all.所以我试图通过点击 ENTER 键旁边的按钮将产品添加到购物车(这是现在将产品添加到购物车的唯一方法),我已经尝试了很多次,但不幸的是所有方法都可以根本不工作。 This is a POS system project built with AngularJS (which my experience in it, is very weak) And I need to make it badly here is the HTML part:这是一个用 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>

I need to make it when someone click "myButton" ,I imagine that I need to add some function in ng-click directive,But Any other ways are welcomed我需要在有人点击“myButton”时完成它,我想我需要在 ng-click 指令中添加一些功能,但欢迎任何其他方式

And Here is the JS part :这是 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);

What you're doing is listening for a keyup event on the field, and if that key matches the return key, it continues with your logic.您正在做的是侦听字段上的 keyup 事件,如果该键与返回键匹配,则继续执行您的逻辑。

If you move the logic into its own function (before barcodeHandler), you can access it elsewhere:如果你将逻辑移到它自己的函数中(在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;
  }
};

Then inside barcodeHandler, use:然后在barcodeHandler里面,使用:

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

Now in your markup, You can do:现在在您的标记中,您可以执行以下操作:

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

Adding something to the $scope of the controller is a way of making it available in the view.向控制器的$scope添加一些东西是使其在视图中可用的一种方式。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM