Custom multiselect list tailored for Angular

Question

Custom multiselect list tailored for Angular

I am working on creating a list that can act as either a select or multiselect based on a parameter. For example, if the parameter is false, selecting A and then B will unselect A and select B.

 <ul>
      <li>a,</li>
      <li>b, and</li>
      <li>c</li>
</ul>

My initial approach involves using a custom directive, which looks like this:

<ul myDirective>
      <li ng-model="a">a,</li>
      <li ng-model="b">b, and</li>
      <li ng-model="c">c</li>
</ul>

In this approach, the directive watches for clicks on the list items. Upon click, it determines whether to unselect any previously selected item and then selects the new value while applying a 'selected' class.

I believe I may not be following Angular's best practices, so I am seeking guidance on how to proceed in the right direction.

** Edit ** I aim to achieve a user experience similar to: http://jsfiddle.net/qbt2myj8/

javascript angularjs angularjs-directive

Answer 1

Answer №1

Personally, I believe that implementing a custom directive can greatly enhance the cleanliness of your code, especially when working with AngularJS.

Here is a comprehensive solution utilizing an AngularJS Custom Directive that promotes code reusability and organization.

HTML

Custom Directive Default Behavior

<ul data-my-directive class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

(The following is a preview screenshot. Refer to the PLAYGROUND link below for interactive exploration)

HTML

With Custom Attribute

<ul data-my-directive data-multi-select="true" class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

(The following is a preview screenshot. Refer to the PLAYGROUND link below for interactive exploration)

Javascript

angular.module('app',[])
  .directive('myDirective', function(){
    return {
      transclude: true,
      template: '<div ng-transclude></div>',
      link: function(scope, element, attrs){
        function addClickListener(i, callback){
          selections[i].addEventListener('click', function(){
            callback(i);
          }, false);
        }

        // Set up attribute value. Goes to default if attribute is not set up
        attrs.multiSelect = attrs.multiSelect || 'false';

        scope.isSelected = [];

        var selections = element[0].getElementsByTagName('li');

        if(attrs.multiSelect === "true"){
          for(var i = 0; i < selections.length; i++){
            scope.isSelected[i] = false;
            addClickListener(i, function(i){
              if(scope.isSelected[i] === true){
                // if previously it is selected (red color), now make it unselected (black color / default color)
                angular.element(selections[i]).removeClass('selected');
                scope.isSelected[i] = false; 
              } else {
                // previously black color, so change it to red color
                angular.element(selections[i]).addClass('selected');
                scope.isSelected[i] = true;
              }
            });
          }
        } else {
          var currentSelection = -1;
          for(var i = 0; i < selections.length; i++){
            scope.isSelected[i] = false;
            addClickListener(i, function(i){
              if(scope.isSelected[i] === true){
                // do nothing
              } else {
                // previously black color, so change it to red color
                angular.element(selections[i]).addClass('selected');
                scope.isSelected[i] = true;

                angular.element(selections[currentSelection]).removeClass('selected');
                scope.isSelected[currentSelection] = false;
                currentSelection = i;
              }
            });
          }
        }
      }
    }
  });

And lastly, the ultimate

PLAYGROUND

for hands-on experimentation! Enjoy exploring :) Have a wonderful day!

Answer 2

Personally, I believe that implementing a custom directive can greatly enhance the cleanliness of your code, especially when working with AngularJS.

Here is a comprehensive solution utilizing an AngularJS Custom Directive that promotes code reusability and organization.

HTML

Custom Directive Default Behavior

<ul data-my-directive class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

(The following is a preview screenshot. Refer to the PLAYGROUND link below for interactive exploration)

HTML

With Custom Attribute

<ul data-my-directive data-multi-select="true" class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

(The following is a preview screenshot. Refer to the PLAYGROUND link below for interactive exploration)

Javascript

angular.module('app',[])
  .directive('myDirective', function(){
    return {
      transclude: true,
      template: '<div ng-transclude></div>',
      link: function(scope, element, attrs){
        function addClickListener(i, callback){
          selections[i].addEventListener('click', function(){
            callback(i);
          }, false);
        }

        // Set up attribute value. Goes to default if attribute is not set up
        attrs.multiSelect = attrs.multiSelect || 'false';

        scope.isSelected = [];

        var selections = element[0].getElementsByTagName('li');

        if(attrs.multiSelect === "true"){
          for(var i = 0; i < selections.length; i++){
            scope.isSelected[i] = false;
            addClickListener(i, function(i){
              if(scope.isSelected[i] === true){
                // if previously it is selected (red color), now make it unselected (black color / default color)
                angular.element(selections[i]).removeClass('selected');
                scope.isSelected[i] = false; 
              } else {
                // previously black color, so change it to red color
                angular.element(selections[i]).addClass('selected');
                scope.isSelected[i] = true;
              }
            });
          }
        } else {
          var currentSelection = -1;
          for(var i = 0; i < selections.length; i++){
            scope.isSelected[i] = false;
            addClickListener(i, function(i){
              if(scope.isSelected[i] === true){
                // do nothing
              } else {
                // previously black color, so change it to red color
                angular.element(selections[i]).addClass('selected');
                scope.isSelected[i] = true;

                angular.element(selections[currentSelection]).removeClass('selected');
                scope.isSelected[currentSelection] = false;
                currentSelection = i;
              }
            });
          }
        }
      }
    }
  });

And lastly, the ultimate

PLAYGROUND

for hands-on experimentation! Enjoy exploring :) Have a wonderful day!

Answer 3

Answer №2

Instead of creating a directive right away, my suggestion is to start by developing a custom JavaScript data structure. Here's a quick example:

/**
 * Generates a selector data structure
 * @param items elements to be listed
 * @param multi whether multiple selection is supported
 * @returns {{cells: *, selectedItems: selectedItems, unselectAll: unselectAll}}
 */
function createSelector (items, multi) {

  var cells = items.map(function (item) {
    // each cell wraps an item and a selected flag
    return  {
      item: item,
      selected: false
    };
  });

  // retrieves an array of the currently selected items
  function selectedItems() {
    return cells
      .filter(function (cell) {
        return cell.selected;
      })
      .map(function (cell) {
        return cell.item;
      });
  }

  // deselects all items
  function unselectAll() {
    cells.forEach(function (cell) {
      cell.selected = false;
    })
  }

  // adding methods to cells
  cells.forEach(function (cell) {
    cell.selectMe = (multi
      ? function () {
      cell.selected = true;
    }
      : function () {
      unselectAll();
      cell.selected = true;
    });
    cell.unselectMe = function () {
      cell.selected = false;
    };

    cell.toggle = function () {
      if (cell.selected) {
        cell.unselectMe();
      } else {
        cell.selectMe();
      }
    }
  });

  return {
    cells: cells,
    selectedItems: selectedItems,
    unselectAll: unselectAll
  };
}

You can easily access your list of selected items in your controller like this:

// ...
$scope.xyzSelector = createSelector(['X','Y','Z'],false);
var getSelectedItems = $scope.xyzSelector.selectedItems; // perform actions with these items in your controller
// ...

Next, utilize Angular data-binding to display this data-structure in your HTML:

    <h3>List of items :</h3>
    <ul>
        <li ng-repeat="cell in xyzSelector.cells" ng-click="cell.toggle()"
            ng-class="{'active': cell.selected}">
            {{cell.item}}
        </li>
    </ul>

    <h3>List of selected items :</h3>
    <ul>
        <li ng-repeat="item in xyzSelector.selectedItems()">
            {{item}}
        </li>
    </ul>

If you wish, you can later encapsulate this functionality into a directive that binds the list of selected items to an ng-model.

Answer 4

Instead of creating a directive right away, my suggestion is to start by developing a custom JavaScript data structure. Here's a quick example:

/**
 * Generates a selector data structure
 * @param items elements to be listed
 * @param multi whether multiple selection is supported
 * @returns {{cells: *, selectedItems: selectedItems, unselectAll: unselectAll}}
 */
function createSelector (items, multi) {

  var cells = items.map(function (item) {
    // each cell wraps an item and a selected flag
    return  {
      item: item,
      selected: false
    };
  });

  // retrieves an array of the currently selected items
  function selectedItems() {
    return cells
      .filter(function (cell) {
        return cell.selected;
      })
      .map(function (cell) {
        return cell.item;
      });
  }

  // deselects all items
  function unselectAll() {
    cells.forEach(function (cell) {
      cell.selected = false;
    })
  }

  // adding methods to cells
  cells.forEach(function (cell) {
    cell.selectMe = (multi
      ? function () {
      cell.selected = true;
    }
      : function () {
      unselectAll();
      cell.selected = true;
    });
    cell.unselectMe = function () {
      cell.selected = false;
    };

    cell.toggle = function () {
      if (cell.selected) {
        cell.unselectMe();
      } else {
        cell.selectMe();
      }
    }
  });

  return {
    cells: cells,
    selectedItems: selectedItems,
    unselectAll: unselectAll
  };
}

You can easily access your list of selected items in your controller like this:

// ...
$scope.xyzSelector = createSelector(['X','Y','Z'],false);
var getSelectedItems = $scope.xyzSelector.selectedItems; // perform actions with these items in your controller
// ...

Next, utilize Angular data-binding to display this data-structure in your HTML:

    <h3>List of items :</h3>
    <ul>
        <li ng-repeat="cell in xyzSelector.cells" ng-click="cell.toggle()"
            ng-class="{'active': cell.selected}">
            {{cell.item}}
        </li>
    </ul>

    <h3>List of selected items :</h3>
    <ul>
        <li ng-repeat="item in xyzSelector.selectedItems()">
            {{item}}
        </li>
    </ul>

If you wish, you can later encapsulate this functionality into a directive that binds the list of selected items to an ng-model.

Custom multiselect list tailored for Angular

Answer №1

Answer №2

Similar questions

Using getElementsByTagName in E4X code involves querying for specific

Why does my counter keep incrementing by more than one every time?

When you try to import a component, it may result in a blank page displaying an error message stating: "TypeError: Cannot set property 'components'

Retrieving outcomes from a sequence of callback functions in Node.Js

What is the best way to send a lengthy JSON string using a GET/POST request on Internet Explorer 8?

Make object calculations easy with the power of JavaScript

JavaScript event listener for SVG path element click is not functioning correctly as anticipated

Tips for incorporating a Survey Monkey website embed into an Angular application

Preventing Copy and Paste and Right-Click Actions With JavaScript

Utilizing Selenium Webdriver to efficiently scroll through a webpage with AJAX-loaded content

Building Vertical Tabs with external JS for loading custom visuals

The file-loader is able to organize images into separate folders when saving them. For example, an image file named "example.jpg" located in Project/Module

Creating stunning 3D animations using Canvas

What are some ways to adjust red and green blocks using CSS?

Switching colors after uncovering text using JavaScript

Utilizing Angular.js to nest directives seamlessly without cluttering the markup

What is the best way to store a personalized configuration for a user within a Node module?

When implementing the Dropdown Picker, it is important to avoid nesting VirtualizedLists inside plain ScrollViews for optimal

Can one retrieve an express session using the sessionID given?

Is it possible to incorporate an existing svg from the page into another svg element?