On JavaScript, Flex and other animals: May 2015

While playing around with SVG files, it seems only natural to bind them to an Angular JS controller and see what happens...

HTML:

	<!doctype html>
	<html ng-app="App">
	<head>
	<script src="angular.min.js"></script>
	<script src="ctrl.js"></script>
	</head>
	<body ng-controller="SVGCtrl">
	<h2>SVG Controlled by Angular JS</h2>
	<p><span>Select Color: </span><select ng-model="selectedColor" ng-options="color for color in colors"></select></p>
	<p><label><input type="checkbox" ng-model="showHandels">Show inner handels</label></p>
	<div>
	<svg width="100" height="100">
	<circle cx="50" cy="50" r="31" ng-style="{stroke: selectedColor}" stroke-width="9.5" fill="none"></circle>
	<circle ng-show="showHandels" cx="50" cy="50" r="6" ng-style="{'stroke': selectedColor,'fill':selectedColor}" stroke-width="1"></circle>
	<line ng-show="showHandels" x1="50" y1="50" x2="35" y2="50" ng-style="{'stroke': selectedColor}" stroke-width="6"></line>
	<line ng-show="showHandels" x1="65" y1="35" x2="50" y2="50" ng-style="{'stroke': selectedColor}" stroke-width="6"></line>
	<path d="M59 65 L83 65 L75 87 Z" ng-style="{'fill': selectedColor}"></path>
	<rect width="20" height="9" x="70" y="56" style="fill:#fff;stroke-width:0;"></rect>
	</svg>
	</div>
	</body>
	</html>

view raw AngularSVG.html hosted with ❤ by GitHub

Controller:

	angular.module('App', []).controller('SVGCtrl', function($scope) {
	$scope.selectedColor = "red";
	$scope.colors = ["red","blue","green"];
	$scope.showHandels = true;
	});

view raw ctrl.js hosted with ❤ by GitHub

On JavaScript, Flex and other animals