Javascript 带条形码生成器的动态网格

我在学习英语。 我正在制作一个应用程序：用户从一个html选择中选择，然后填充两个输入字段。之后，用户按Update，条形码脚本生成带有3个参数的代码图像：第一个选择和两个输入。（这三个部分之间有一些空格）。到目前为止，没有问题

我添加了用于添加新表单的按钮，json数组正确保存了输入。我想为每个编译的表单生成一个条形码。我该怎么办？ 这是我正在做的一个简单的例子：

http://plnkr.co/edit/hxZb6g9tkwN0zpRmOMjw?p=preview

在html的末尾，您可以找到条形码的脚本：

<div class="ean">
        <img id="barcodeImage" style="border: solid 1px black;"/>
    <script type="text/javascript">
        function updateBarcode() 
        {
                var barcode = new bytescoutbarcode128();
                var space= "  ";
            var value = document.getElementById("barcodeValue").value;
            var value1 = document.getElementById("barcodeValue1").value;
            var value2 = document.getElementById("barcodeValue2").value;

            barcode.valueSet(value + space + value1 + space + value2);
            barcode.setMargins(5, 5, 5, 5);
            barcode.setBarWidth(2);

            var width = barcode.getMinWidth();

            barcode.setSize(width, 100);

            var barcodeImage = document.getElementById('barcodeImage');
            barcodeImage.src = barcode.exportToBase64(width, 100, 0);
        }
    </script>

您应该创建（也可以查看此处-，）以生成条形码，并将此指令放入模板中的ng repeat循环中：

app.directive('barcode', function(){
  return{
    restrict: 'AE',
    template: '<img id="barcodeImage" style="border: solid 1px black;" src="{{src}}"/>',
    scope: {
      food: '='
    },
    link: function($scope){
      $scope.$watch('food', function(food){
        console.log($scope.food);
        var barcode = new bytescoutbarcode128();
        var space= "  ";

            barcode.valueSet([$scope.food.selectproduct, $scope.food.Quantity1, $scope.food.Quantity2].join(space));
            barcode.setMargins(5, 5, 5, 5);
            barcode.setBarWidth(2);

            var width = barcode.getMinWidth();

            barcode.setSize(width, 100);

            $scope.src = barcode.exportToBase64(width, 100, 0);
      }, true);
    }
  }
});

app.directive（'barcode'，function（）{
返回{
限制：“AE”，
模板：“”，
范围：{
食物：'='
},
链接：功能（$scope）{
$scope.$watch（'食品'），function（食品）{
console.log（$scope.food）；
var barcode=new bytescoutbarcode128（）；
var space=“”；
barcode.valueSet（[$scope.food.selectproduct，$scope.food.Quantity1，$scope.food.Quantity2].join（space））；
条形码。设置边距（5,5,5,5）；
条形码。设置宽度（2）；
var width=barcode.getMinWidth（）；
条形码。设置大小（宽度，100）；
$scope.src=条形码.exportToBase64（宽度，100，0）；
}，对）；
}
}
});