我有这种格式的json数据：
angular.module('app', []).controller('MainController', ['$scope', function($scope) {
$scope.cities = [{
name: "city A",
elements: [{
id: 'c01',
name: 'name1',
price: 15,
qte: 10
}, {
id: 'c02',
name: 'name2',
price: 18,
qte: 11
}, {
id: 'c03',
name: 'name3',
price: 11,
qte: 14
}],
subsities: [{
name: "sub A1",
elements: [{
id: 'sub01',
name: 'nameSub1',
price: 1,
qte: 14
}, {
id: 'sub02',
name: 'nameSub2',
price: 8,
qte: 13
}, {
id: 'sub03',
name: 'nameSub3',
price: 1,
qte: 14
}]
}, {
name: "sub A2",
elements: [{
id: 'ssub01',
name: 'nameSsub1',
price: 1,
qte: 7
}, {
id: 'ssub02',
name: 'nameSsub2',
price: 8,
qte: 1
}, {
id: 'ssub03',
name: 'nameSsub3',
price: 4,
qte: 19
}]
}, {
name: "sub A3",
elements: [{
id: 'sssub01',
name: 'nameSssub1',
price: 1,
qte: 11
}, {
id: 'sssub02',
name: 'nameSssub2',
price: 2,
qte: 15
}, {
id: 'sssub03',
name: 'nameSssub3',
price: 1,
qte: 15
}]
}]
}, {
name: "city B",
elements: [{
id: 'cc01',
name: 'name11',
price: 10,
qte: 11
}, {
id: 'cc02',
name: 'name22',
price: 14,
qte: 19
}, {
id: 'cc03',
name: 'name33',
price: 11,
qte: 18
}]
}, {
name: "city C",
elements: [{
id: 'ccc01',
name: 'name111',
price: 19,
qte: 12
}, {
id: 'ccc02',
name: 'name222',
price: 18,
qte: 17
}, {
id: 'ccc03',
name: 'name333',
price: 10,
qte: 5
}]
}];
$scope.extractSubsities = function(itemSelected) {
if (itemSelected && itemSelected.elements) {
$scope.data = itemSelected.elements;
}
}
});
我把它们放在桌子上。
HTML：
<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
</select>
<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
<td>{{ item3.qte}}</td>
</tr>
</table>
</body>
直到现在一切正常我将选择的城市或子城市的值放入表格中，我想将它们放在图表中，以便数据更具可读性。这个库为Chart.js提供了角度指令jtblin.github.io/angular-chart.js/#bar-chart它们有代码示例和所有内容。我需要的是将条形图集成到我的代码中。看看我是怎么做到的：
我下载了图表库，这是我的应用程序结构：
|--css
|--main.css
|--js
|--chart
|--augular-chart.css
|--augular-chart.js () I think only these two files are necessary.
|--controllers
|--MainCtrl.js
|--index.html
index.html变得像：
<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
</select>
<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
<td>{{ item3.qte}}</td>
</tr>
</table>
<div ng-controller="MainCtrl">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
</div>
</body>
和json变得像：
angular.module("myApp",["chart.js"]).controller("BarCtrl", function ($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});
angular.module("myApp",["chart.js"]).controller('MainController', ['$scope', function($scope) {
$scope.cities = [{
name: "city A",
elements: [{
id: 'c01',
name: 'name1',
price: 15,
qte: 10
}, {
id: 'c02',
name: 'name2',
price: 18,
qte: 11
}, {
id: 'c03',
name: 'name3',
price: 11,
qte: 14
}],
subsities: [{
name: "sub A1",
elements: [{
id: 'sub01',
name: 'nameSub1',
price: 1,
qte: 14
}, {
id: 'sub02',
name: 'nameSub2',
price: 8,
qte: 13
}, {
id: 'sub03',
name: 'nameSub3',
price: 1,
qte: 14
}]
}, {
name: "sub A2",
elements: [{
id: 'ssub01',
name: 'nameSsub1',
price: 1,
qte: 7
}, {
id: 'ssub02',
name: 'nameSsub2',
price: 8,
qte: 1
}, {
id: 'ssub03',
name: 'nameSsub3',
price: 4,
qte: 19
}]
}, {
name: "sub A3",
elements: [{
id: 'sssub01',
name: 'nameSssub1',
price: 1,
qte: 11
}, {
id: 'sssub02',
name: 'nameSssub2',
price: 2,
qte: 15
}, {
id: 'sssub03',
name: 'nameSssub3',
price: 1,
qte: 15
}]
}]
}, {
name: "city B",
elements: [{
id: 'cc01',
name: 'name11',
price: 10,
qte: 11
}, {
id: 'cc02',
name: 'name22',
price: 14,
qte: 19
}, {
id: 'cc03',
name: 'name33',
price: 11,
qte: 18
}]
}, {
name: "city C",
elements: [{
id: 'ccc01',
name: 'name111',
price: 19,
qte: 12
}, {
id: 'ccc02',
name: 'name222',
price: 18,
qte: 17
}, {
id: 'ccc03',
name: 'name333',
price: 10,
qte: 5
}]
}];
$scope.extractSubsities = function(itemSelected) {
if (itemSelected && itemSelected.elements) {
$scope.data = itemSelected.elements;
}
}
});
但是这一切都不能与我合作我使用浏览器的网络工具，它会向我显示以下错误：
-angular-chart.js:13 Uncaught ReferenceError: Chart is not defined
-MainCtrl.js:2 Uncaught ReferenceError: controller is not defined
-Uncaught Error: [$injector:modulerr]
答案 0 :(得分：0)
您在ng-controller="MainCtrl"中定义了index.html两次？！其次，在index.html中，您在控制器中使用MainCtrl，MainController。
<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
</select>
<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
<td>{{ item3.qte}}</td>
</tr>
</table>
<div>
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
</div>
</body>