AngularJS ng-repeat：ループ内にキャンバスを動的にレンダリング/バインドします。

Question

AngularJSの世界に比較的新しい、それまで楽しんでいます。
しかし、私は自分のdb内のエントリをループする試みに苦労しており、それぞれについて<canvas>をレンダリングしています。

が、これは私のデータ（簡潔にするために短縮）であると言う：

app.factory('paintings', ['$http', function($http) { 
    var o = { 
     paintings: [] 
    }; 
    o.getAll = function() { 
     return $http.get('/paintings') 
      .success(function(data) { 
       angular.copy(data, o.paintings); 
      }); 
    } 
    return o; 
}]); 

私は、各エントリをループしたいとして構築しています：工場でコントローラにロードされ

var paintings = [ 
    { "_id" : ObjectId("31c75"), "data" : "0,0,0,0" }, 
    { "_id" : ObjectId("deadb"), "data" : "1,3,0,255" } 
]; 

要素<canvas>を入力し、<canvas>要素をdataという別のオブジェクト（Grid）に引数として渡します。これによりコンテキストに基づいて、そのデータに基づいて<canvas>が描画されます。

シンプルですね。残念ながら、私はそのようにする方法を失っており、より鋭敏な質問をするための言葉を持っていません。
まだレンダリングされていないインラインテンプレートを使用しているという事実に問題があると思います。

HTML：：

<div ng-repeat="painting in paintings" some-directive-maybe="bindCanvas(painting._id)"> 
    <canvas id="{{ painting._id }}" width="800" height="400"></canvas> 
</div> 

JS：

app.controller('PaintingCtrl', [ 
    '$scope', 
    function($scope) { 
     $scope.bindCanvas(canvasId) { 
      var grid = new Grid(document.getElementById(canvasId)); 
      // Have fun with grid 
     } 
    } 
]); 

は、StackOverflowの私を助けて

これは、一般的に私は現在試みているアプローチです。あなたは私の唯一の希望です...

Answer 1

var paintings = [ 
    { "_id" : ObjectId("31c75"), "data" : "0,0,0,0" }, 
    { "_id" : ObjectId("deadb"), "data" : "1,3,0,255" } 
]; 

絵はarrayにする必要があります。

app.controller('PaintingCtrl', [ 
     '$scope', 
     function($scope) { 
      $scope.bindCanvas(canvasId) { 
       var grid = new Grid(document.getElementById(canvasId)); 
       // Have fun with grid 
      } 
      //paintings should be on scope for ng-repeat to find it. 
      // If ng-repeat does not find paintings on scope then it will create a new empty paintings object on scope 
      $scope.paintings = [ 
       { _id : "31c75", data : "0,0,0,0" }, 
       { _id : "deadb", data : "1,3,0,255" } 
      ]; 

     } 
    ]); 

アップデート：私は2 plunkersを作成している

。

まず、plunkerはちょうどstaticwidthとheightとcanvas要素を作成します。作成されるcanvas要素の数は、painting.jsonファイル内の絵の数に基づいています。

第二に、plunkerは、さらに一歩進んで、dynamicwidthとheightとcanvas要素を作成します。作成されるcanvas要素の数は、painting.jsonファイル内の絵の数に基づいています。ここでwidthとheightは、paintings.jsonファイルのdataプロパティに基づいています。

これが役に立ちます。

Answer 2

次のコードは、同じページのリピートチャートでも機能します。

<div ng-repeat="a in abc"> 
    <canvas id="pieChart{{a}}" ng-bind = "bindCanvas(a)" ></canvas> 
<div> 

JSファイル

$scope.abc = [1,2,3]; 

$scope.bindCanvas = function(i) { 
    var ctx = document.getElementById("pieChart"+i); 
    new Chart(ctx,{ 
     type: 'pie', 
     data: { 
      labels: ["Tele-conference", "Projector", "Laptop", "Desktop", "Coffee-machine"], 
      datasets: [{ 
       label: "Population (millions)", 
       backgroundColor: ["red", "green","blue","violet","yellow"], 
       data: [200,100,300,400,150] 
      }] 
     }, 
    }); 
}