JSFiddle - React, Tailwind, and code Playground

AngularJS - Directive with template ng-repeat

by Andrew Pougher

HTML

<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="Ctrl">

  <hr>
  <vendlogos logodata='vendorlogos'></vendlogos>
  <hr>
    <pre>{{vendorlogos |json}}</pre>
</div>

JavaScript

angular.module('myApp', [])
  .controller('Ctrl', ['$scope', function($scope) {
    $scope.vendorlogos = [{
      name: "vendor name",
      bcolor: '233,33,21',
      logo: 'https://placehold.it/150x150/transparent/ffffff/?text=LOGO1'
    }, {
      name: "vendor name",
      bcolor: '333,233,21',
      logo: 'https://placehold.it/150x150/transparent/ffffff/?text=LOGO2'
    }, {
      name: "vendor name",
      bcolor: '12,233,21',
      logo: 'https://placehold.it/150x150/transparent/ffffff/?text=LOGO3'
    }, {
      name: "vendor name",
      bcolor: '12,4,241',
      logo: 'https://placehold.it/150x150/transparent/ffffff/?text=LOGO4'
    }];
  }])

.directive('vendlogos', function() {
  return {
    restrict: 'E',
    scope: {
      logodata: '='
    },
    template: '<div style="background: rgba({{n.bcolor}},0.3)  url({{n.logo}}) center center;background-repeat:no-repeat;background-size:contain;min-height:140px;min-width:100px;display:inline-block" class="label label-warning" ng-repeat="n in logodata">{{n.name}}</div>',
    link: function(scope, element, attrs) {
      element.bind('click ', function(event) {
        alert(attrs.name);

      })
    }
  };

});