JSFiddle - React, Tailwind, and code Playground

by isnigirev

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="app">
    <div class="filter-content-view">	<span class="filter-content-view__label">Показать задачи:</span>
	<span class="button__bg clickable">
		<btn-group name="button__bg" selected="notSigned" class="btn-group">
			<btn value="notSigned"><span class="button button_radius_left"><i class="button__icon"></i>На подписание</span>

        </btn>
        <btn value="signed"><span class="button button_radius-right"><i class="button__icon"></i>Подписанные</span>

        </btn>
        </btn-group>
        </span>
    </div>
</div>

CSS

.btn-group span {
	    border: 1px solid orangered;
	}
	.btn-group .active {
	    background-color: #008080;
	}

JavaScript

angular.module('app', [])
	    .directive('btnGroup', function ($compile) {
	    var btnGroupTemplate = '<span class="{{btnGroupClass}}"><input type="text" name="{{btnGroupName}}" value="{{btnGroupValue}}" /><span ng-repeat="button in buttons" ng-click="button.select()" ng-class="{active:button.isSelected()}">{{button.label}}</span></span>';

	    //[1]
	    //var btnGroupTemplate = '<span class="{{btnGroupClass}}"><input type="text" name="{{btnGroupName}}" value="{{btnGroupValue}}" /><span ng-repeat="button in buttons" ng-click="button.select()" ng-class="{active:button.isSelected()}">{{buttonlabel}}</span></span>';

	    //var btnGroupTemplate = '<span class="{{btnGroupClass}}"><input type="text" name="{{btnGroupName}}" value="{{btnGroupValue}}" /><span ng-repeat="button in buttons" ng-click="button.select()" ng-class="{active:button.isSelected()}" ng-bind-html-unsafe="{{buttonlabel}}"></span></span>';
	    //var btnGroupTemplate = '<span class="{{btnGroupClass}}"><input type="text" name="{{btnGroupName}}" value="{{btnGroupValue}}" /><span ng-repeat="button in buttons" ng-click="button.select()" ng-class="{active:button.isSelected()}" compile="{{button.label}}"></span></span>';
	    //var btnGroupTemplate = '<span class="{{btnGroupClass}}"><input type="text" name="{{btnGroupName}}" value="{{btnGroupValue}}" /><span ng-repeat="button in buttons" ng-click="button.select()" ng-class="{active:button.isSelected()}" ng-bind-html="{{button.label}}"></span></span>';
	    //var btnGroupTemplate = '<span class="{{btnGroupClass}}"><input type="text" name="{{btnGroupName}}" value="{{btnGroupValue}}" /><span ng-repeat="button in buttons" ng-click="button.select()" ng-class="{active:button.isSelected()}" ng-bind="{{button.label}}"></span></span>';

	    return {
	        restrict: 'E',
	        //scope: false,
	        controller: ["$scope", function (scope) {
	            scope.buttons = [];
	            scope.buttonSelected = null;
	            this.addButton = function...