AngularJS ng-repeat：動態渲染/綁定循環內的畫布

AngularJS的世界比較新，到目前爲止享受它。
但是，我努力嘗試循環訪問我的數據庫中的條目，併爲每個條目渲染一個<canvas>。AngularJS ng-repeat：動態渲染/綁定循環內的畫布

說這是我的數據（簡稱爲簡潔起見）：

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

這是由工廠加載到控制器：

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; 
}]);

我通過每一個條目想要循環和構建一個<canvas>元件，則該<canvas>元件傳遞給另一個對象（Grid）與data作爲參數，創建上下文，並繪製於基於所述數據<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上。你是我唯一的希望...

來源

2016-09-29 asgaines

是您的繪畫對象的範圍，比如$ scope.paintings定義JS文件？ –

@RaviTeja：我相信它應該複製到我包括在我最近的編輯工廠$範圍 – asgaines

我已經更新了我的答案。一探究竟。 –

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只是創建了canvas元素與staticwidth和height。創建的canvas元素的數量基於painting.json文件中的繪畫數量。

其次，plunker更進一步，並創建canvas元素與dynamicwidth和height。創建的canvas元素的數量基於painting.json文件中的繪畫數量。這裏width和height是基於data財產paintings.json文件。

希望這會有所幫助。

來源

2016-09-29 04:51:50

哎呦，我輸錯了。它是一個數組，由工廠加載到$ scope中。我將編輯我的問題。我應該爲這樣的任務建立一個指令嗎？ – asgaines

謝謝！你的強盜幫我弄到了！ – asgaines

以下代碼也適用於同一頁面上的重複圖表。

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

添加以下代碼

$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] 
      }] 
     }, 
    }); 
}

來源

2018-02-13 06:26:48

AngularJS ng-repeat：動態渲染/綁定循環內的畫布

回答

相關問題