<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">
    <label for="mostrarCodigos">┬┐Mostrar?
    <input type="checkbox" ng-model="mostrarCodigos" />
    </label>
    <br>
    <angular-barcode ng-show="mostrarCodigos" ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
  </div>
</body>

</html>
angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.opciones = {
      format: 'CODE128',
      lineColor: '#000000',
      width: 2,
      height: 100,
      displayValue: true,
      fontOptions: '',
      font: 'monospace',
      textAlign: 'center',
      textPosition: 'bottom',
      textMargin: 2,
      fontSize: 20,
      background: '#ffffff',
      margin: 0,
      marginTop: undefined,
      marginBottom: undefined,
      marginLeft: undefined,
      marginRight: undefined,
      valid: function(valid) {}
    };

    $scope.codigos = ["hola", "mundo", "somos", "palabras"];
  }]);
/* Styles go here */