Sitemap / Advertise


This web-based project is all about teaching you implementing data binding option and its features on a javascript file through...



How to make an adjustable color wheel using AngularJS



Read Later


Read Later


This web-based project is all about teaching you implementing data binding option and its features on a javascript file through...






This web-based project is all about teaching you implementing data binding option and its features on a javascript file through After taking this tutorial, you will be acquainted with the app, module, controller and last but not least directive feature in AngularJS. Furthermore, ng-model features and the data binding process with input elements are well-explained throughout the source code. To inspect the project itself, you can click the preview button down below; to download project tools, you can use download as zip folder option by subscribing.

For more information about the code files, please visit Source Code section below.

Figure - 14.1

Starting Angular JS App

First of all, you have to start AngularJS apps and controllers above the script at which they are executed , using ng-app and ng-controller.

In this case, the app and controller are named as Chart and Color, you have to initial them with these names.

Figure - 14.2

Data Binding

After implementing AngularJS as script tag format, it is ready to add input elements on body.

Figure - 14.3

Now, you can bind data defined at colorChart.js as $scope variables to input elements by using ng-model like ng-model="component1".

In this method, you can either use pre-defined $scope variables or re-defined $scope variables in functions.

Creating <colorchart> Directive

After creating module and controller variables to start Chart app and Color controller, you have to define $scope variables for data binding primarily.

app.controller('Color', function($scope) {

$scope.component1 = "red";
$scope.component2 = "#ff6666";


Figure - 14.4

Now, it is ready to create a directive, in this case, named as colorchart. Do not forget that directives can be used as elements with id and class name as well as an html element with tags.

Figure - 14.5

By using template, you can execute other elements and functions in directives without rows of html code.

After that, bind $scope variables to colorchart in which circle divs placed, using other binding method known as two brackets method - {{ component1 }} .

<div style="background-color:{{ component1 }};" class="ChartComponent one"> ...

Styling Input and Div Elements

For making circle divs look like a color chart, use a combination of border, margin and arithmetically reduced width values for each circle div.

Figure - 14.6

Figure - 14.7

Do not forget to add @media rules for its mobile version and compatibility to other devices.

Figure - 14.8

Figure - 14.9

Also, as an alternative, you can execute the source code with Selenium in Protractor Framework by clicking the following link below.


Source Code

Please sign in to download source code files below as zip folder, including index.html.

Zip Folder




var app = angular.module('Chart', []);

app.controller('Color', function($scope) {
      $scope.component1 = "red";
	  $scope.component2 = "#ff6666";
	  $scope.component3 = "pink";
	  $scope.component4 = "orange";
	  $scope.component5 = "yellow";
      $scope.component6 = "#cccc00";
	  $scope.component7 = "#006600";
	  $scope.component8 = "green";
	  $scope.component9 = "lightgreen";
	  $scope.component10 = "blue";
	  $scope.component11 = "lightblue";
	  $scope.component12 = "#cccccc";	  

app.directive('colorchart', function() {
    return {
        template : 
		'<div style="background-color:{{ component1 }};" class="ChartComponent one"> <div style="background-color:{{ component2 }};" class="ChartComponent two"> <div style="background-color:{{ component3 }};" class="ChartComponent three"> <div style="background-color:{{ component4 }};" class="ChartComponent four"> <div style="background-color:{{ component5 }};" class="ChartComponent five"> <div style="background-color:{{ component6 }};" class="ChartComponent six"> <div style="background-color:{{ component7 }};" class="ChartComponent seven"> <div style="background-color:{{ component8 }};" class="ChartComponent eight"> <div style="background-color:{{ component9 }};" class="ChartComponent nine"> <div style="background-color:{{ component10 }};" class="ChartComponent ten"> <div style="background-color:{{ component11 }};" class="ChartComponent eleven"> <div style="background-color:{{ component12 }};" class="ChartComponent twelve">  </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>'



h1, span, input{font-family: 'Roboto Slab', serif;font-weight:bold;color:#002699;}

#Adjust{position:absolute;top:0;left:0;height:100vh;width:50vw;background-color:slategrey;background-image: linear-gradient(to bottom right, white, slategrey, white);}

#ChartCss{position:absolute;top:0;right:0;height:100vh;width:50vw;background-color:#002699;background-image: linear-gradient(to bottom right, #002699, white, #002699);}

@media only screen and (max-width: 700px) {


1 ) The Modern JavaScript Collection