I'm looking to integrate AngularJs with JsBarcode - can anyone provide guidance on how

Hey everyone, apologies if this is a bit rough, but it's my first time asking a question here.

I'm currently working on creating a barcode with AngularJS using JsBarcode. However, when I try to include the Angular code like {{y.code}}, JsBarcode doesn't seem to recognize it and just displays an empty space instead.

$

<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 attempted something like this, but unfortunately, it didn'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

For the desired outcome, make sure to utilize

jsbarcode-value="{{x.code.trim()}}"
instead of {{y.code}}

Problem: y is not defined in the second division because the ng-repeat div closes before the beginning of the second ng-repeat, resulting in y being unavailable while only x.code is accessible.

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 considered something similar like this, but it did not 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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is each block showing a form that was generated using ng-repeat?

Below is the HTML code snippet I am working with: <div class="row"> <div class="col-md" ng-repeat="song in songs"> <div class="title"><div class="add">+</div></div> <div class="item"></div&g ...

Controlling setInterval internally in JavaScript: A guide

While developing my application, I have implemented the following code snippet: setInterval(function() { // some code // goes here }, 60000); The goal is to run certain code on a 1-minute interval, but sometimes it may take 2-3 minutes to complete. ...

What is the best way to define objects containing arrays of objects in JavaScript?

I am seeking to create a blueprint for the following data structure, with all values provided by the user: { "name":"ABC", "city":"X", "child": [{"name":"ccc","age":"22"}, {"name":"ccc","age":"22"} ] } This data structure consists of a parent obje ...

Navigate to a refreshed version of the page with varying parameters using React Navigation

Currently, I am utilizing React Navigation for navigating between different pages within my app. One of the pages is the Profile page which displays a user info card along with their posts. Within this Profile component, I have integrated the Post componen ...

Spin an Alpha with Adjustments (THREE.JS R76)

Creating a unique wormhole effect using a cylinder and rotating texture is my current project. To see an example, visit: The texture rotation is achieved with the following code... tunnel.material.map.offset.y += 0.01; tunnel.material.map.offset.x += ...

My goal is to utilize CSS grid to craft a unique layout by establishing a grid area. However, the layout is not functioning as anticipated

Currently, I am in the process of mastering CSS grid layout design. If you are curious to see my progress so far, check out this Codepen link showcasing my code. Additionally, for a visual representation of the layout, feel free to view the layout image ...

What is the best way to responsively scale multiple overlay images in CSS?

I am facing an issue with multiple images overlaid on top of a background in my web design. Here's a sample code snippet that showcases the problem: <div style="position: relative; left: 0; top: 0;"> <img src="images/background.png" styl ...

Looking to add a form within another form using AJAX? Just keep in mind that the initial form should also be inserted using AJAX

I have incorporated a form using AJAX on a Php page. Now, I am trying to add another form within that existing form which is also created using AJAX, but unfortunately, it is not functioning as expected. This serves as the parent page. <div class=" ...

react-query: QueryOptions not functioning as expected when utilizing userQueries()

When passing certain "query options" while using useQueries() to fetch multiple queries simultaneously, these specified "query options" do not get applied during query executions (e.g. refetchOnWindowFocus has a value of true but I want it to be false). F ...

Starting service without dependency injection in Angular

I am facing an issue with my list of services (referred to as "handlers") and one manager, which is also a service. I need all handlers to register themselves with the manager. However, I have encountered a problem - no one is injecting these handlers, so ...

Steps for implementing a custom markup trigger with prettyPhoto:

Recently, I encountered an issue with my table view: https://i.sstatic.net/Fji2F.png Upon clicking the td, it should open the PrettyPhoto Lightbox In the default PrettyPhoto setup, the html trigger looks like this: <a href="images/fullscreen/2.jpg" ...

Can beautifulsoup handle scraping a "dynamic webpage"?

I am exploring the use of beautifulsoup for web scraping, despite my lack of theoretical knowledge about webpages. I believe I have grasped the basics and will try my best to articulate my question. By a dynamic webpage, I mean a site that changes its HTM ...

How can I incorporate a standalone Vuetify component into my Nuxt.js project?

Using Vuetify with nuxt.js specifically for the dashboard layout - how can I achieve this in my nuxt.config.js file? modules: [ //['nuxt-leaflet', { /* module options */}], 'bootstrap-vue/nuxt', '@nuxtjs/ax ...

The "smiley" character added to the information during an Ajax call

Encountering an unusual issue. A colon (:) character is being appended to the JSON data sent to the server via AJAX request. https://example.com/image1.png The colon character seems to appear after sending the JSON, but it does not show up when inspectin ...

Inserting a large number of records in MySQL using a batch insertion method

Currently, I am facing an issue with inserting multiple records into a MySQL table at once. Just so you know, I am using Node.js along with MySQL (you can find more information about it here: https://www.npmjs.com/package/mysql) Here is what I have been ...

Dedicated pages for individual items within a MEAN application

I'm currently developing an application using Node, Express, Mongoose, and Angular. I have successfully displayed all items on a single page. My next task is to create a separate page for each item from the database. To achieve this, I set up a route: ...

How to incorporate a collection of additional entities into an existing entity in a Database/PHP design?

Allow me to pose a database design query. As someone new to PHP and diving into my first database course, I'm grappling with the best approach to bring my idea to life. The project at hand is a membership database comprising of 'members' an ...

Unable to visualize object in three.js

Looking to generate cubes in a random location on the page using a for loop, but currently experiencing issues where the cubes are not appearing as expected. **Note: When I check the cube with console log, this is the output: ** -cube.js:24 Mesh {uuid ...

Obtaining a JavaScript proxy from a WCF service using webHttpBinding

I have configured all the necessary endpoints, bindings, and behaviors to consume a service using JSON. However, I am struggling to find a way to generate a JavaScript proxy for accessing the service from my client-side JavaScript with jQuery through Ajax. ...

What could be causing the issue with React Router not functioning properly in Material UI?

I'm currently working on creating a tab and adding routing inside the first tab. However, I am facing an issue where the desired page does not display after clicking on the link. Strangely, upon refreshing the page, the corresponding page appears as e ...