Angular-UI undo

by militellovincenzo

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div ng:controller="controller">
    <div class="panel panel-default">
        <div class="panel panel-heading">Toggle</div>
        <div class="panel panel-body">
            <div class="input-group" data-ng-repeat="item in list">
                <input type="text" class="form-control" placeholder="Search for..." ng-model="item"> <span class="input-group-btn">
      <div class="btn btn-default" bcmea-Toggle on-action="toggleOn(item, $index)" on-undo="toggleoff(item, $index)" undo-class="fa fa-undo"> <span class="fa fa-remove" aria-hidden="true"></span></div>
            </span>
        </div>
        <!-- /input-group -->
    </div>
    <script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>

CSS

.item, .placeholder {
    padding: 2px;
    width: 50px;
    height: 20px;
    border: 1px solid #333;
    background: #EEE;
}
.placeholder {
    background: #AEF;
}
.toggle-on > i {
    background-color:red;
}

JavaScript

var myapp = angular.module('myapp', ['ui']);


myapp.controller('controller', function ($scope) {
    $scope.list = ["Item one", "Item two", "Item three", "Item four", "Item five", "Item six"];
    $scope.toggleOn = function (item, index) {
        console.log('Toggle On', item, index);
    }

    $scope.toggleoff = function (item, index) {
        console.log('Toggle off', item, index);
    }

});

myapp.directive('bcmeaToggle', ['$compile', '$q', '$parse', function ($compile, $q, $parse) {
    var definition = {
        restrict: 'A',
        scope: {
            onAction: "&",
            onUndo: "&",
            undoClass: "@"
        },
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    iAttrs["toggle-status"] = false;
                    iAttrs["original-class"] = angular.element(iElement.find("span")).attr("class");
                },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    iElement.bind('click', function (self, fn, args) {
                        iAttrs["toggle-status"] = !iAttrs["toggle-status"] || false;
                        var status = iAttrs["toggle-status"];
                        var undoClass = scope.undoClass || "fa fa-undo";
                        var btnItem = angular.element(iElement.find("span"))

                        var classToAdd = (status === true) ? undoClass : iAttrs["original-class"];
                        btnItem.attr('class', classToAdd);

                        var invoker = $parse((status === true) ? scope.onAction : scope.onUndo);
                        invoker(scope);
                    });
                }
            }

        }
    };
    return definition;
}]);


angular.bootstrap(document, ['myapp']);