bartaelterman/app.js

## app.js
angular.module('sphere1', [])
    .controller('SphereController', function() {
        this.radius;
        this.currentCircle = 1;

        this.circles = circles;

        this.setCurrent = function(val) {
            this.currentCircle = val;
            console.log(val);
        }

        this.isCurrent = function(val) {
            return val == this.currentCircle;
        }

        this.getradius = function() {
            return this.radius;
        }

        this.drawCircles = function() {
            var svg = d3.select("svg");
            dataarr = this.circles.map(function(x) {return x.radius})
            var circle = svg.selectAll("circle").data(dataarr);
            circle.enter().append("circle");
            circle.attr("cy", 60);
            circle.attr("cx", function(d, i) {return i * 100 + 30; });
            circle.attr("r", function(d) {return d;});
        };
    });

var circles = [
{
    "radius": 10,
    "nr": 1
},
{
    "radius": 16,
    "nr": 2
},
{
    "radius": 5,
    "nr": 3
}
];

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three spheres</title>
        <script src="http://d3js.org/d3.v2.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div ng-app="sphere1" ng-controller="SphereController as sp">
          <svg> </svg>
          {{sp.drawCircles()}}
          <ul>
              <li ng-repeat="circle in sp.circles">
                  <a href ng-click="sp.setCurrent(circle.nr)">Circle {{circle.nr}} </a>
              </li>
          </ul>

          <div ng-repeat="circle in sp.circles">
              <div ng-show="sp.isCurrent(circle.nr)">
              <h2>Circle {{sp.currentCircle}}</h2>
              Radius:
              <input type="number" min=0 ng-model="circle.radius">
          </div>
          </div>
      </div>
    </body>
</html>
	angular.module('sphere1', [])
	.controller('SphereController', function() {
	this.radius;
	this.currentCircle = 1;

	this.circles = circles;

	this.setCurrent = function(val) {
	this.currentCircle = val;
	console.log(val);
	}

	this.isCurrent = function(val) {
	return val == this.currentCircle;
	}

	this.getradius = function() {
	return this.radius;
	}

	this.drawCircles = function() {
	var svg = d3.select("svg");
	dataarr = this.circles.map(function(x) {return x.radius})
	var circle = svg.selectAll("circle").data(dataarr);
	circle.enter().append("circle");
	circle.attr("cy", 60);
	circle.attr("cx", function(d, i) {return i * 100 + 30; });
	circle.attr("r", function(d) {return d;});
	};
	});

	var circles = [
	{
	"radius": 10,
	"nr": 1
	},
	{
	"radius": 16,
	"nr": 2
	},
	{
	"radius": 5,
	"nr": 3
	}
	];
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Three spheres</title>
	<script src="http://d3js.org/d3.v2.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
	<script src="app.js"></script>
	</head>
	<body>
	<div ng-app="sphere1" ng-controller="SphereController as sp">
	<svg> </svg>
	{{sp.drawCircles()}}
	<ul>
	<li ng-repeat="circle in sp.circles">
	<a href ng-click="sp.setCurrent(circle.nr)">Circle {{circle.nr}} </a>
	</li>
	</ul>

	<div ng-repeat="circle in sp.circles">
	<div ng-show="sp.isCurrent(circle.nr)">
	<h2>Circle {{sp.currentCircle}}</h2>
	Radius:
	<input type="number" min=0 ng-model="circle.radius">
	</div>
	</div>
	</div>
	</body>
	</html>