AngularJS ng-select and ng-switch-when issue
Question
I'm trying to add a selection menu to my angular charts and I'm running into some problems. I used this selection app template and tried to incorporate it into my current app. However the only thing that shows up on the page is the selection menu and the axis of the graph.
I looked at the console log for any errors that may have sprung up and found that one of the src url wasn't found, and updated the url in my current code. This did not solve my problem, however, and no more errors showed up in the console to give me some insight as to what I'm doing wrong. This is my second time ever working with the selection directive so its difficult for me to spot any errors in my code.
My markup:
<!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>
My 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]
}
]);
Edit: I see now that the problem lies in the js file in the data model. I initially thought that it was the data array inside $scope.data that was being called in the html tag of the div, so I simply created two different data arrays under that model as dataA and dataB in place of data . However, the series array is also required in the data model for the data-ac-data directive to function properly.
I'm confused as to how I should format the code in the model so as to easily call the data in the html when a selection is made. I'm also not sure if I can use an expression such as "{{data.dataA}}" in place of "data" in the html tag. Please let me know the easiest way to modify my code.
2 answers
solution1
0 2015-07-14 05:43:18
This
ac-data="dataA"
ac-data="dataB"
Should be
ac-data="data.dataA"
ac-data="data.dataB"
solution2
0 ACCPTED 2015-07-14 06:17:28
The problem was with $scope.data model. It needed two groups of elements each with a series and data array. The directive was also modified to data-ac-data="data[0]" and "data[1]" respectively.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.