Ng-barcode

Developer
Lorenzo D'Ianni
Size
2,888 Kb
Views
26,312
  1. Ng-barcode Previews
  2. Ng-barcode HTML Codes
  3. Ng-barcode JS Codes

How do I make an ng-barcode?

AngularJS directive that create code39 barcode. What is a ng-barcode? How do you make a ng-barcode? This script and codes were developed by Lorenzo D'Ianni on 29 September 2022, Thursday.

Ng-barcode Previews
IQ Test

Ng-barcode - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ng-barcode</title> <link rel='stylesheet prefetch' href='https://rawgit.com/LuigiQuarta/ng-barcode/master/demo/assets/css/main.css'>
</head>
<body> <div ng-app="demo" ng-controller="DemoCtrl as demoCtrl"> <h1>ng-barcode</h1> <ng-barcode ng-barcode-input="{{demoCtrl.barcodeInput}}" ng-barcode-code="code39" ng-barcode-color="{{demoCtrl.colorBarcode()}}" ng-barcode-background="{{demoCtrl.colorBackground}}"> </ng-barcode> <div class="text-field"> <input type="text" placeholder="Type and transform..." ng-model="demoCtrl.barcodeInput"> </div> <section> <div class="list-action"> <h2 class="label">Color settings</h2> <input type="checkbox" id="id-name--1" ng-model="demoCtrl.showHex" class="switch-input"> <label for="id-name--1" class="switch-label">HEX format</label> </div> <div ng-if="!demoCtrl.showHex" class="flex"> <div class="input-range"> <input type="range" min="0" max="255" ng-model="demoCtrl.rgb.r"> <div>Red: <br>{{demoCtrl.rgb.r}}</div> </div> <div class="input-range"> <input type="range" min="0" max="255" ng-model="demoCtrl.rgb.g"> <div>Green: <br>{{demoCtrl.rgb.g}}</div> </div> <div class="input-range"> <input type="range" min="0" max="255" ng-model="demoCtrl.rgb.b"> <div>Blue: <br>{{demoCtrl.rgb.b}}</div> </div> </div> <div ng-if="demoCtrl.showHex" class="text-field"> <input type="text" ng-model="demoCtrl.hex"> <div class="label">HEX</div> </div> </section>
</div>
<!-- GitHub Corner -->
<a href="https://github.com/Zoimaru/ng-barcode" target="_blank" class="github-corner"> <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path> <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path> </svg>
</a>
<style> .github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='https://rawgit.com/LuigiQuarta/ng-barcode/master/dist/ng-barcode.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ng-barcode - Script Codes JS Codes

angular .module('demo', [ 'ngBarcode' ]) .controller('DemoCtrl', [DemoCtrl]);
function DemoCtrl() { this.barcodeInput = this.barcodeInput || 'Hello world'; this.hex = '#03A9F4'; this.rgb = { r: 0, g: 0, b: 0 }; this.colorBarcode = getBarcodeColor; this.colorBackground = [255, 255, 255]; function getBarcodeColor() { if (this.showHex) { return this.hex; } else { return [this.rgb.r, this.rgb.g, this.rgb.b]; } }
}
Ng-barcode - Script Codes
Ng-barcode - Script Codes
Home Page Home
Developer Lorenzo D'Ianni
Username lorenzodianni
Uploaded September 29, 2022
Rating 4.5
Size 2,888 Kb
Views 26,312
Do you need developer help for Ng-barcode?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lorenzo D'Ianni (lorenzodianni) Script Codes
Name
NgEasyModal
Checkbox Style 2.0 - SCSS
Checkbox Style - SCSS
Smooth Scroll
Material Design - Animations
AngularJS - Controller As
Material Design - Switch
Material Design - Button in pure CSS
Cards experience
AngularJS template
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!