javascript - 我如何将 AngularJs 与 JsBarcode 一起使用?

标签 javascript html css angularjs

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

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

最佳答案

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

关于javascript - 我如何将 AngularJs 与 JsBarcode 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56225909/

相关文章:

javascript - 在 Joomla 中加载脚本标签的问题

javascript - .split() 和 .replace() 一个字符串值,用于在 JavaScript 中过滤出所需的文本

HTML - 刷新后保留的输入值

CSS 显示 :Inline-block mis-aligns when multi line text is present

javascript - 独立显示和隐藏内容

javascript - url 更改时调用 typescript 方法

javascript - 使用 JavaScript 预测元素宽度

javascript - html输入表单写入csv

html - 水平导航栏子导航向下环绕而不是使用它后面(左)的空间

css - AngularJS bootstrap twitter 在点击后悬停在链接上,即使它不再悬停