Skip to content
Dynamic QR code generator for AngularJS
Branch: master
Clone or download
Latest commit 9d12141 Jul 7, 2014

angular-qr v0.2.0 Build Status

QR code generator for AngularJS


Check out


  • AngularJS v 1.0+
  • qrcode.js (bower install qrcode is installed with angular-qr as dependecy)


We use bower for dependency management. Add

dependencies: {
    "angular-qr": "latest"

To your bower.json file. Then run

bower install

This will copy the angular-qr files into your bower_components folder, along with its dependencies. Load the script files in your application:

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/qrcode/lib/qrcode.min.js"></script>
<script type="text/javascript" src="bower_components/angular-qr/angular-qr.min.js"></script>

Add the ja.qr module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ja.qr']);


$scope.string = 'YOUR TEXT TO ENCODE';
<qr text="string"></qr>
<qr type-number="8" correction-level="'M'" size="200" input-mode="'ALPHA_NUM'" text="string" image="true"></qr>

Required attributes


Your text to encode from variable in the scope. If you want to encode text directly you need to escape it text="'YOUR TEXT TO ENCODE'".

Optional attributes


  • 1-40
  • default value: 0 = minimal required version


  • L - Low
  • M - Medium (default)
  • Q - Quartile
  • H - High


Size in pixels

  • default value: 250


  • NUMBER: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • ALPHA_NUM: *0–9, A–Z (upper-case only), space, $, %, , +, -, ., /, :
  • 8bit: ISO 8859-1
  • default value: minimal required input mode based on input text


  • If you want to render qr code into image element set this attribute to true.


Contributions are welcome. Please make a pull request against canary branch, use Git Commit Message Conventions and do not bump versions. Also include tests.


We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use gulp:

npm install -g gulp
npm install
bower install

The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in karma.conf.js


The MIT License

Copyright (c) 2014 Jan Antala

You can’t perform that action at this time.