重复 Angular + 触摸键盘

Question

我正在制作一个带有某些字段的 table，可以选择添加新行。最后，我将打印所有字段。我要做的应用程序是触摸显示器，所以我做了一个新键盘。问题是，如果我按下这个键盘的一个按钮，我可以读取相应的输入，但我无法读取 json 数组。但是如果我用电脑键盘输入这个输入，我可以看到数组中按下的键。

这不是我的申请，这只是一个简单的例子来向您展示我的问题：http://plnkr.co/edit/4cP2xSDRgvHG29RuA92N?p=preview

这里是键盘的 jQuery:

    $(document).ready(function() {
  $('#myInput').click(function() {
    $('#n_keypad').fadeToggle('fast');
  });
  $('.done').click(function() {
    $('#n_keypad').hide('fast');
  });
  $('.numero').click(function() {
    if (!isNaN($('#myInput').val())) {
      if (parseInt($('#myInput').val()) === 0) {
        $('#myInput').val($(this).text());
      } else {
        $('#myInput').val($('#myInput').val() + $(this).text());
      }
    }
  });
  $('.neg').click(function() {
    if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) {
      if (parseInt($('#myInput').val()) > 0) {
        $('#myInput').val(parseInt($('#myInput').val()) - 1);
      }
    }
  });
  $('.pos').click(function() {
    if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) {
      $('#myInput').val(parseInt($('#myInput').val()) + 1);
    }
  });
  $('.del').click(function() {
    $('#myInput').val($('#myInput').val().substring(0, $('#myInput').val().length - 1));
  });
  $('.clear').click(function() {
    $('#myInput').val('');
  });
  $('.zero').click(function() {
    if (!isNaN($('#myInput').val())) {
      if (parseInt($('#myInput').val()) !== 0) {
        $('#myInput').val($('#myInput').val() + $(this).text());
      }
    }
  });
});

谢谢！！

Answer 1

使用 angular 代替 jQuery。这是一个运行示例。它更容易和松耦合。

HTML

<input type="text"  data-ng-model="food.Text" data-ng-click="food.showKeypad = true" />
<keypad data-show="food.showKeypad" data-text="food.Text" />

JS

app.directive('keypad', function($compile) {
      return {
          restrict: 'AE',
          scope : {
            show : '=',
            text : '='
          },
          link : function(scope, element, attrs, model){
            scope.type = function(){
                scope.text = scope.text+'0';
            };
            scope.done = function(){
                scope.show = false;
            };
            element.parent().append($compile(
                    '<div ng-show="show">'+
                    '<button ng-click="type()">0</button>'+
                    '<button ng-click="done()">x</button>'+
                    '</div>'
            )(scope));
         }
      };
    });

Plunker Here

重复 Angular + 触摸键盘

Ng-Repeat Angular + Touch Keyboard

javascript

keyboard

jquery

angularjs