Question

伙计们，如果这有点可怜，首先对不起，但这是我的第一个问题。

我正在尝试使用angular js通过JsBarcode生成条形码，但是当我将Angular代码放置为{{y.code}}时，JsBarcode无法识别，只会显示一个空白。

$

<html ng-app="myApp">

<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-controller="myCtrl">

  <div class="row" ng-repeat="y in teste">
    <div class="col center">
      <svg class="barcode" jsbarcode-format="EAN13" jsbarcode-value="978020137962" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold">
</svg>
      <h4>{{y.code}}</h4>
    </div>
  </div>
  \* i thinked in some like this, but doesn't work*\
  <div class="row" ng-repeat="x in teste">
    <div class="col center">
      <svg class="barcode" jsbarcode-format="EAN13" jsbarcode-value="{{y.code}}" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold">
</svg>
      <h4>{{x.code}}</h4>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      JsBarcode(".barcode").init();
    });
  </script>

  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
          $scope.teste = [

            {

              "item": "1",
              "code": " 978020137962",

            },
            {

              "item": "2",
              "code": "978020137129 ",

            },
            {

              "item": "3",
              "code": " 978020137923",

            },
          });
  </script>

</body>

</html>

Answer 1

要获得预期的结果，请使用jsbarcode-value="{{x.code.trim()}}"代替{{y.code}}

问题： 在第二个div中未定义 y ，因为ng-repeat div在第二个ng-repeat开始之前关闭，其中 y 不可用，只有 x.code < / strong>可用

var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.teste = [ { "item": "1", "code": " 978020137962", }, { "item": "2", "code": "978020137129 ", }, { "item": "3", "code": " 978020137923", }, ] });

<html ng-app="myApp"> <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body ng-controller="myCtrl"> <div class="row" ng-repeat="y in teste"> <div class="col center"> <svg class="barcode" jsbarcode-format="EAN13" jsbarcode-value="978020137962" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold"> </svg> <h4>{{y.code}}</h4> </div> </div> \* i thinked in some like this, but doesn't work*\ <div class="row" ng-repeat="x in teste"> <div class="col center"> <svg class="barcode" jsbarcode-format="EAN13" jsbarcode-value="{{x.code.trim()}}" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold"> </svg> <h4>x-{{x.code}}</h4> </div> </div> <script> $(document).ready(function() { JsBarcode(".barcode").init(); }); </script> </body> </html>

codepen-https://codepen.io/nagasai/pen/XwegrG

如何将AngularJs与JsBarcode一起使用？

1 个答案: