rgba by binding

by Aides

HTML

<div ng-app="app">
  <input type="text" ng-model="colorInput" ng-init="colorInput = '#ff0000'"> 
  <span ng-bind="colorInput"></span>
  <input type="range" ng-model="colorAlpha" min="0" max="1" step="0.01" ng-init="colorAlpha = 1">
  <span ng-bind="colorAlpha"></span>
  <br>
  <br>
  <div class="colorField" style="background-color: {{colorInput | color:colorAlpha}}">
   
  </div>
</div>

CSS

.colorField
{
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

JavaScript

angular.module('app', [])
.filter('color', function()
{
	return function(colorString, opacity)
  {
  	opacity = opacity || 1;
    
    colorString = colorString.replace('#', '');
    
    var splitColor = colorString.match(/.{1,2}/g);
    
    splitColor = splitColor.map(function(hex) { return parseInt(hex, 16); });
    
    return 'rgba(' + splitColor[0] + ', ' + splitColor[1] + ', ' + splitColor[2] + ', ' + opacity + ')';
  }
});