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

【问题标题】：How do i use AngularJs with JsBarcode?我如何将 AngularJs 与 JsBarcode 一起使用？
【发布时间】：2019-05-21 04:44:04
【问题描述】：

伙计们，如果这有点糟糕，首先很抱歉，但这是我的第一个问题。

我正在尝试使用 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>

【问题讨论】：

$scope.teste = [ 缺少右方括号
codepen.io/nagasai/pen/XwegrG?editors=1010
Ops，对不起，请大家使用 Naga Sai A 的 codepen，我忘了在 sn-p 中
感谢 Naga Sai A
但我仍然有角度与 jsbarcode 的问题

标签： javascript html css angularjs

【解决方案1】：

要达到预期结果，请使用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>

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

【讨论】：