好吧,如果这有点糟糕,首先抱歉,但这是我的第一个问题。
我正在尝试使用 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/