javascript - How to make an accordion with d3 and angular? -
i trying make accordion d3.js , angular.js. have taken code couple different places , tried piece work not luck. here have far:
<div ng-app="myapp"> <accordion></accordion> </div> var app = angular.module('myapp', []); app.controller('accordioncontroller', function($scope){ //initiate array hold active tabs $scope.activetabs = []; //check if tab active $scope.isopentab = function (tab) { //check if tab in activetabs array if ($scope.activetabs.indexof(tab) > -1) { //if so, return true return true; } else { //if not, return false return false; } } //function 'open' tab $scope.opentab = function (tab) { //check if tab open if ($scope.isopentab(tab)) { //if is, remove activetabs array $scope.activetabs.splice($scope.activetabs.indexof(tab), 1); } else { //if it's not, add it! $scope.activetabs.push(tab); } } }) app.directive('accordion', function(){ function link(scope, el){ d3.select(el[0]).append("div") .attr('class', 'accordioncontainer') .attr('ng-controller', "accordioncontroller"); var accordion = d3.select(".accordioncontainer"); (var = 1; <=5; i++) { var accordiontab = accordion.append("div") .attr('class', 'accordiontab'); accordiontab.append("div") .attr('class', 'accordiontabtitle') .attr('ng-click', "opentab('tab " + + "')") .text("tab " + i); accordiontab.append("div") .attr('class', 'accordiontabcontent') .attr('ng-click', "isopentab('tab " + + "')") .text("tab " + + " content goes here!"); } } return { link:link, restrict: 'e' } })
i new d3 , new angular. appreciated. thanks.