我如何将 AngularJs 与 JsBarcode 一起使用？

debugcn 发表于 Dev

环R

好吧，如果这有点差，首先抱歉，但这是我的第一个问题。

我正在尝试使用 angular js 使用 JsBarcode 生成条码，但是当我放置像 {{y.code}} 这样的 Angular 代码时，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>

娜迦赛A

为了达到预期的结果，使用jsbarcode-value="{{x.code.trim()}}"代替{{y.code}}

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

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>

代码笔 - https://codepen.io/nagasai/pen/XwegrG

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。