angularjs-select/angularjs-select.js at master · marcio0/angularjs-select · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
angular.module('sp', []).directive('selectpicker', function ($parse, $filter) {
    var buttonTpl = '' +
        '<button type="button" class="btn btn-default dropdown-toggle" style="width: 100%" data-toggle="dropdown">' +
        '{{getLabel(value) || emptyText}}' + ' <span class="caret"></span>' +
        '</button>';
    var listTpl = '' +
        '<ul class="dropdown-menu" style="width: 100%" role="menu">' +
        '<li ng-repeat="option in options"><a href="#" ng-bind="getLabel(option)" ng-click="select(option)"></a></li>' +
        '</ul>';
    var groupedListTpl = '' +
        '<div class="dropdown-menu select-picker">' +
        '<div class="select-menu">' +
        '<ul class="" role="menu">' +
        '<li class="select-group" ng-repeat="group in groups" ng-click="liClick()">' +
        '<div class="select-group-ct" ng-bind="group.name"></div>' +
        '<ul>' +
        '<li ng-repeat="opt in group.items | filter:search" ng-click="select(opt)" class="select-item">' +
        '<div class="select-item-ct" ng-bind="getLabel(opt)"></div>' +
        '</li>' +
        '</ul>' +
        '</li>' +
        '</ul>' +
        '</div>' +
        '</div>';

    var searchBoxTpl = '' +
        '<div class="search-wrapper">' +
        '<input class="form-control item-search" ng-model="search.name"></input>'
        '</div>' +
        '';

    return {
        template: '<div class="btn-group" style="width: 100%"></div>',
        replace: true,
        scope: {
            value: '=ngModel',
            options: '=selectpickerOptions',
            label: '@selectpickerLabel',
            emptyText: '@selectpickerEmptyText',
            grouper: '@selectpickerGrouper'
        },
        compile: function compileFn(iElement, iAttrs, transclude) {
            var selectEl = [angular.element(buttonTpl), angular.element(groupedListTpl)];
            //var searchEl = angular.element(searchBoxTpl);
            //selectEl[1].prepend(searchEl)

            iElement.removeClass('form-control');
            //TODO remover ng-options se existir
            iElement.append(selectEl);

            selectEl[1].on('click', function (e) {
                if (e.target.classList.contains('select-item-ct') ||
                    e.target.classList.contains('select-item')) {
                    return true;
                }
                return false;
            });

            return {
                pre: function preLink(scope, element, attrs) {
                },
                post: function postLink(scope, element, attrs) {
                    scope.getLabel = function (option) {
                        return $parse(scope.label)(option);
                    };

                    scope.select = function select(option) {
                        scope.value = option;
                    };

                    function setupGroups (options) {
                        var groups = {}, groupsArray = [],
                            getter = $parse(scope.grouper);

                        for (var i in options) {
                            var opt = options[i];
                            var groupName = getter(opt);

                            if (groupName in groups) {
                                groups[groupName].push(opt);
                            }
                            else {
                                groups[groupName] = [opt];
                            }
                        }

                        for (var i in groups) {
                            groupsArray.push({
                                name: i,
                                items: groups[i]
                            });
                        }
                        scope.groups = groupsArray;
                        return groupsArray;
                    };

                    setupGroups();
                    scope.$watch('options', setupGroups);
                }
            };
        }
    };
});