Angular pseudo-radio directive

Angular-pseudo-radio-directive.markdown

Angular pseudo-radio directive

A Pen by Marcos Sandrini on CodePen.

License.

index.html

<div ng-app="demo">
  <div ng-controller="demoCtrl">
    <div pseudo-radio 
      data-values="{1:'one', 2:'two', 3:'three'}"
      data-model="myVar"></div>
  </div>
</div>

script.js

var a = angular.module('demo',[]);

a.controller('demoCtrl', function($scope){ });

a.directive('pseudoRadio',function(){
	return {
		restrict: 'AE',
		scope: {values:'=', model:'='},
		template: '<a href="javascript:;" class="option" '+
		'ng-class="{active:model===v}" '+
		'ng-repeat="(v,label) in values" '+
     'ng-click="Value(v)">{{label}}</a>',
		controller: function($scope, $element){
			$scope.Value = function(v){
          $scope.model = v;
			}
		}
	}
});

style.css

[pseudo-radio]{
  background:#999;
  padding:3px 0 3px 3px;
  overflow:hidden;
  float:left;
}
[pseudo-radio] .option{
  padding:5px;
  background:#777;
  color:#fff;
  text-decoration:none;
  float:left;
  margin-right:3px;
  font-family:sans-serif;
}
[pseudo-radio] .option.active{
  background:#333;
}