Javascript 使用ng repeat重复Google图表

我还在学习AngularJS，所以如果我说了什么愚蠢的话，请原谅我。我正在使用谷歌图表创建我的图表

每次用户单击一个按钮，我的网页都会显示一个以上的图表。所以我考虑使用ng repeat来显示它们。此外，每个图表都可以通过按钮（以下代码中的img）关闭（不再显示）：

---

所以我的问题是：如何在每次创建图表时扩展$scope.arrayDiv？如何获取以这种方式创建的div的id以影响图表？

尝试使用角度谷歌图表

请参阅：

https://angular-google-chart.github.io/angular-google-chart/docs/latest/examples/bar/

<div class="chartContainer" ng-repeat="data in arrayDiv">
    <div layout-padding layout-margin  google-chart chart="drawChart(x)">        
    </div> 
</div>

$scope.drawChart = function (value) {

    $scope.chartData = [];
    var chartValue = {
        c: [{
           v: 'subject
        }, {
            v: 5,
            f: " questions"
        }, {
            v: 6,
            f:  " questions"
        }]

    };
    $scope.chartData.push(chartValue);
    $scope.qaChart = {};
    $scope.qaChart.type = "BarChart";
    $scope.qaChart.data = {
        "cols": [{
            id: "Sections",
            label: "Subject",
            type: "string"
        }, {
            id: "Correct",
            label: "Correct",
            type: "number"
        }, {
            id: "Wrong",
            label: "Wrong",
            type: "number"
        }],
        "rows": $scope.chartData
    };
    $scope.qaChart.options = {

        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "colors": ['#4CAF50', '#EF5350', '#00adee'],
        "vAxis": {
            "title": " Questions",                
        },
        "hAxis": {
            "title": "Details",
        }
    };
    return $scope.qaChart;
};

$scope.drawChart=函数（值）{
$scope.chartData=[]；
var chartValue={
c:[{
v:'主题
}, {
五:五,，
f：“问题”
}, {
五:六,，
f：“问题”
}]
};
$scope.chartData.push（chartValue）；
$scope.qaChart={}；
$scope.qaChart.type=“条形图”；
$scope.qaChart.data={
“科尔斯”：[{
id:“节”，
标签：“主题”，
类型：“字符串”
}, {
id:“正确”，
标签：“正确”，
类型：“编号”
}, {
id:“错”，
标签：“错误”，
类型：“编号”
}],
“行”：$scope.chartData
};
$scope.qaChart.options={
“isStacked”：“正确”，
“填充”：20，
“displayExactValues”：正确，
“颜色”：['4CAF50'、'EF5350'、'00adee']，
“vAxis”：{
“标题”：“问题”，
},
“哈克斯”：{
“标题”：“详情”，
}
};
返回$scope.qaChart；
};

请参见-我不知道存在这种情况。谢谢

var chart = new google.visualization.ChartWrapper({
    'chartType': chartType, 
    'containerId': //???
});

<div class="chartContainer" ng-repeat="data in arrayDiv">
    <div layout-padding layout-margin  google-chart chart="drawChart(x)">        
    </div> 
</div>

$scope.drawChart = function (value) {

    $scope.chartData = [];
    var chartValue = {
        c: [{
           v: 'subject
        }, {
            v: 5,
            f: " questions"
        }, {
            v: 6,
            f:  " questions"
        }]

    };
    $scope.chartData.push(chartValue);
    $scope.qaChart = {};
    $scope.qaChart.type = "BarChart";
    $scope.qaChart.data = {
        "cols": [{
            id: "Sections",
            label: "Subject",
            type: "string"
        }, {
            id: "Correct",
            label: "Correct",
            type: "number"
        }, {
            id: "Wrong",
            label: "Wrong",
            type: "number"
        }],
        "rows": $scope.chartData
    };
    $scope.qaChart.options = {

        "isStacked": "true",
        "fill": 20,
        "displayExactValues": true,
        "colors": ['#4CAF50', '#EF5350', '#00adee'],
        "vAxis": {
            "title": " Questions",                
        },
        "hAxis": {
            "title": "Details",
        }
    };
    return $scope.qaChart;
};