javascript - AngularJS ng-select and ng-switch-when issue -
i'm trying add selection menu angular charts , i'm running problems. used this selection app template , tried incorporate current app. thing shows on page selection menu , axis of graph.
i looked @ console log errors may have sprung , found 1 of src url wasn't found, , updated url in current code. did not solve problem, however, , no more errors showed in console give me insight i'm doing wrong. second time ever working selection directive difficult me spot errors in 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 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: see problem lies in js file in data model. thought data array inside $scope.data being called in html tag of div, created 2 different data arrays under model dataa , datab in place of data. however, series array required in data model data-ac-data directive function properly.
i'm confused how should format code in model call data in html when selection made. i'm not sure if can use expression such "{{data.dataa}}" in place of "data" in html tag. please let me know easiest way modify code.
this
ac-data="dataa" ac-data="datab" should be
ac-data="data.dataa" ac-data="data.datab"
Comments
Post a Comment