Ng-Repeat Angular + 触控键盘

Question

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

这不是我的应用程序，它只是向您展示我的问题的一个简单示例：http://plnkr.co/edit/4cP2xSDRgvHG29RuA92N?p=preview

这里是KeyBoard的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

使用 jQuery 的 angular insteted。 这是一个运行示例。它更容易且松耦合。

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