6
\$\begingroup\$

I have created a script for going a multiple select option in Angular without using a select box that you have to hold control in order to select multiple items.

Demo: http://jsfiddle.net/qwertynl/xfw9f/

Code on GitHub

Here is my code:

Javascript:

var switcharoo = angular.module('switcharoo', []).directive('multiSelect', function(){
    return {
        restrict: 'E',
        scope: {
            items: '=',
            default: '=',
            leftTitle: '@',
            rightTitle: '@'
        },
        templateUrl: "switcharoo.html",
        link: function(scope)   {
            scope.switchItem = function(item)   {
                var index = scope.default.indexOf(item);
                if(index == -1) {
                    //add it in
                    scope.default.push(item);
                }
                else    {
                    //remove it
                    scope.default.splice(index, 1);
                }
            }
        }
    };
})

switcharoo.directive('switchitem', function() {
    return {
        restrict: 'E',
        scope: {
            value: '='
        },
        template: '<div>{{value}}</div>'
    };
});

HTML Template:

<style>
    .switchBox .entBox {
        overflow:auto;height:8em; width:190px;border:1px solid black;float:left;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    .switchBox .entBox div:hover {
        background-color: #908f8f;
    }
    .switchBox .eBox2.entBox {
        background-color: #ccc9c9;
    }
</style>

<label>
    <table>
        <tr>
            <th>{{leftTitle}}</th>
            <th>{{rightTitle}}</th>
        </tr>
        <tr class="switchBox">
            <td>
                <div class="entBox eBox1">
                    <switchitem ng-repeat="(key, value) in items" ng-if="default.indexOf(key) == -1" value="value" ng-click="switchItem(key)"></switchitem>
                </div>
            </td>
            <td>
                <div class="entBox eBox2">
                    <switchitem ng-repeat="(key, value) in items" ng-if="default.indexOf(key) > -1" value="value" ng-click="switchItem(key)"></switchitem>
                </div>
            </td>
        </tr>
    </table>
</label>

Is there anything I can do to make my code slicker?

\$\endgroup\$
2
\$\begingroup\$

I really like your code, I only have 2 minor observations:

  • I understand the part where default has the default items. I am not sure that after initialization you should keep referring to the default variable ( from a naming perspective ), maybe call it selection instead of default ?

  • Related to the previous point, ng-if="default.indexOf(key) == -1" and ng-if="default.indexOf(key) > -1" only make sense during initialization. In my mind, it would be ideal to provide a isSelected( key ) that you can use for the ng-if. Not to mention that it will remove a > out of your HTML attribute and look better in Markup ;)

\$\endgroup\$
  • \$\begingroup\$ Yea, I realize now that it should be called "selected" and not default. I'll try using a function instead for the ng-if \$\endgroup\$ – qwertynl Feb 6 '14 at 19:47
  • \$\begingroup\$ Does this look better? jsfiddle.net/qwertynl/xfw9f/15 \$\endgroup\$ – qwertynl Feb 6 '14 at 19:51
  • \$\begingroup\$ If you go for slickness, then I would go for return ~scope.selected.indexOf(item); other than that, looks good to me. \$\endgroup\$ – konijn Feb 6 '14 at 19:54
  • \$\begingroup\$ What does the tilde (~) do? \$\endgroup\$ – qwertynl Feb 6 '14 at 19:54
  • \$\begingroup\$ Bitwise NOT, converts -1 to 0, convert anything else to not-zero, \$\endgroup\$ – konijn Feb 6 '14 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.