JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<div ng-app="myApp" ng-controller="ListController">

<ul>
  <li ng-repeat="list in lists">
    <canvas name='canvas' width="800" height="100" app-list-draw="list"></canvas>
  </li>
</ul>

</div>

JavaScript

// Define the `myApp` module
var myApp = angular.module('myApp', []);

// Define the `ListController` controller on the `myApp` module
myApp.controller('ListController', function ListController($http, $scope) {
/*
    $http.get('list.data.json').then(function (response) {
        $scope.lists = response.data;
    });
    */
    $scope.lists = [
    {
        "id": 1,
        "fill1": "rgb(200,0,0)",
        "fill2": "rgba(0,0,200,0.5)",
    },
    {
        "id": 2,
        "fill1": "rgb(40,0,0)",
        "fill2": "rgba(0,0,200,0.5)",
    },
];
}).directive("appListDraw", function appListDraw() {
    return {
        restrict: 'A',
        scope: {
        	list: '=appListDraw'
        },
        link: function (scope, element){
            var ctx = element[0].getContext('2d');
            ctx.fillStyle = scope.list.fill1; //I want to insert json data here (list.fill1)//
            ctx.fillRect(10, 10, 50, 50);

            ctx.fillStyle = scope.list.fill2; //I want to insert json data here (list.fill2)
            ctx.fillRect(30, 30, 50, 50);
           ctx.stroke();
 
        }

    }

});