我正在尝试向我的 Angular 图表添加选择菜单，但遇到了一些问题。我用过this选择应用程序模板并尝试将其合并到我当前的应用程序中。然而，页面上唯一显示的是选择菜单和图表的轴。
我查看了控制台日志，查找可能出现的任何错误，发现未找到 src url 之一，并更新了当前代码中的 url。然而，这并没有解决我的问题，并且控制台中没有显示更多错误，让我了解我做错了什么。这是我第二次使用选择指令，因此我很难发现代码中的任何错误。
我的标记:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Angular Chart</title>
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="selection" ng-options="item for item in items">
</select>
<hr/>
<div ng-switch on="selection">
<div ng-switch-when="Selection 1">
<div
data-ac-chart="'line'"
data-ac-data="data[0]"
data-ac-config="config"
class="chart">
</div>
</div>
<div ng-switch-when="Selection 2">
<div
data-ac-chart="'line'"
data-ac-data="data[1]"
data-ac-config="config"
class="chart">
</div>
</div>
</div>
</body>
</html>
我的JS:
var myApp = angular.module('myApp', ['angularCharts']);
myApp.controller("MainCtrl", ['$scope', function($scope) {
$scope.config = {
title: 'Products',
tooltips: true,
labels: false,
mouseover: function() {},
mouseout: function() {},
click: function() {},
legend: {
display: true,
position: 'right'
}
};
$scope.data = [{
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [100, 500, 0]
}, {
x: "Desktops",
y: [300, 100, 100]
}, {
x: "Mobiles",
y: [351]
}, {
x: "Tablets",
y: [54, 0, 879]
}]},
{
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [10, 500, 0]
}, {
x: "Desktops",
y: [30, 200, 10]
}, {
x: "Mobiles",
y: [357, 127, 20]
}, {
x: "Tablets",
y: [54, 0, 879]
}]
}];
$scope.items = ['Selection 1','Selection 2'];
$scope.selection = $scope.items[0]
}
]);
编辑:我现在发现问题出在数据模型中的js文件中。我最初认为是在 div 的 html 标签中调用的 $scope.data 内的数据数组，所以我只是在该模型下创建了两个不同的数据数组作为 dataA 和 dataB 代替 data。但是，数据模型中也需要系列数组才能使 data-ac-data 指令正常运行。
我很困惑应该如何格式化模型中的代码，以便在做出选择时轻松调用 html 中的数据。我也不确定是否可以使用诸如 "{{data.dataA}}" 之类的表达式来代替 html 标记中的 "data" 。请让我知道修改代码的最简单方法。
最佳答案
这个
ac-data="dataA"
ac-data="dataB"
应该是
ac-data="data.dataA"
ac-data="data.dataB"
关于javascript - AngularJS ng-select 和 ng-switch-when 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31397950/