Looking for a Dual Listbox with AngularJS and Bootstrap

If you're looking for a Dual Listbox component with AngularJS and Bootstrap that can be installed using npm, I recommend considering the "angular-bootstrap-multiselect" library. It provides a feature-rich dual listbox component that integrates well with AngularJS and Bootstrap.

You can install it via npm using the following command:

Copy codenpm install angular-bootstrap-multiselect

After installing, you can include it in your AngularJS project by adding the necessary script and style references. Here's an example of how you can use it:

1. Include the required JavaScript and CSS files in your project:

<link rel="stylesheet" href="node_modules/angular-bootstrap-multiselect/dist/angular-bootstrap-multiselect.min.css">
<script src="node_modules/angular-bootstrap-multiselect/dist/angular-bootstrap-multiselect.min.js"></script>

1. Add the dual listbox component in your AngularJS view template:

<angular-bootstrap-multiselect
  ng-model="selectedItems"
  options="items"
  extra-settings="settings">
</angular-bootstrap-multiselect>

1. Configure the options and settings in your AngularJS controller:

angular.module('myApp', ['angular-bootstrap-multiselect'])
  .controller('myController', function ($scope) {
    $scope.selectedItems = []; // Selected items will be stored here

    $scope.items = [
      { id: 1, label: 'Item 1' },
      { id: 2, label: 'Item 2' },
      // Add more items as needed
    ];

    $scope.settings = {
      displayProp: 'label', // Property used to display item label
      idProp: 'id', // Property used to identify items
    };
  });

Make sure to replace 'myApp' with your actual AngularJS module name and adjust the options and settings according to your requirements.

With these steps, you should be able to integrate the "angular-bootstrap-multiselect" library into your AngularJS and Bootstrap project using npm.