javascript - 使用 AngularJS 和 Bootstrap 寻找双列表框

Question

我正在寻找这样的组件以包含在我的项目中:

http://geodan.github.io/duallistbox/sample-100.html

我想用 npm 安装它。

问题是我测试了那里的一些示例，但没有成功(我得到异常，或者没有 npm，只有 bower)

这些是我测试过的例子。

• https://github.com/alexklibisz/angular-dual-multiselect-directive
• https://github.com/frapontillo/angular-bootstrap-duallistbox
• http://www.bootply.com/mRcBel7RWm

有没有关于 AngularJs、Bootstrap 和 npm 的推荐？

Answer 1

这可能会解决您的需求:Dual list Box

应用程序.js

angular.module('plunker', [])
  .controller('MainCtrl', function($scope, utils) {
    $scope.list1 = [],
      $scope.list2 = [];

    utils.insertData($scope.list1, 5);

  })
  .factory('utils', function Utils() {
    return {
      insertData: function(list, numItems) {
        for (var i = 0; i < numItems; i++) {
          list.push({
            id: i + 1,
            title: 'item' + (i + 1)
          });
        }
      },
      getIndexesFromList: function(list) {
        var newList = [];
        for (var i in list) {
          if (typeof list[i].id === "number" && newList.indexOf(list[i].id) === -1) newList.push(list[i].id)
        }
        return newList;
      },
      getAllSelectedItems: function(list) {
        var newList = [];
        newList = list.filter(function(el) {
          return el.active === true;
        });
        return newList;
      },
      addListIfNoExists: function(list2, newListToAppend) {
        var indexes = this.getIndexesFromList(list2);
        var newList = [];
        for (var i in newListToAppend) {
          if (indexes.indexOf(newListToAppend[i].id) === -1) list2.push(newListToAppend[i])
        }
        return list2;
      }
    }
  })
  .directive('dualList', function(utils) {

    function _controller($scope) {
      $scope.selectAllItem = function(list, checked) {
        list.map(function(item) {
          item.active = checked
          return item;
        });
      };
      $scope.getAllSelectedItems = function(list) {
        return utils.getAllSelectedItems(list);
      }
      $scope.moveItemToRightList = function() {
        var newListToAppend = $scope.list1.filter(function(el) {
          if (el.active === true) {
            el.active = false;
            return el;
          }
        });
        if (newListToAppend.length > 0) {
          $scope.list1 = $scope.list1.filter(function(el) {
            return utils.getIndexesFromList(newListToAppend).indexOf(el.id) === -1;
          });
          $scope.list2 = utils.addListIfNoExists($scope.list2, newListToAppend);
          if ($scope.list1.length === 0) $scope.checked1 = false;
        }

      };
      $scope.moveItemToLeftList = function() {
        var newListToAppend = $scope.list2.filter(function(el) {
          if (el.active === true) {
            el.active = false;
            return el;
          }
        });
        if (newListToAppend.length > 0) {
          $scope.list2 = $scope.list2.filter(function(el) {
            return utils.getIndexesFromList(newListToAppend).indexOf(parseInt(el.id)) === -1;
          });
          $scope.list1 = utils.addListIfNoExists($scope.list1, newListToAppend);
          if ($scope.list2.length === 0) $scope.checked2 = false;
        }

      };
    }
    return {
      restrict: "E",
      scope: true,
      controller: _controller,
      templateUrl: "dualList.html"
    };
  });

双列表.html

<div class="container">
  <br />
  <div class="row">
    <div class="dual-list list-left col-md-5">
      <div class="well text-right">
        <div class="row">
          <div class="col-md-3">
            <div class="checkbox">
              <label>
                <input type="checkbox"
                       ng-model="checked1"
                       ng-click="selectAllItem(list1, checked1)">
                    Todo {{getAllSelectedItems(list1).length}}/{{list1.length}}
              </label>
            </div>
          </div>
          <div class="col-md-9">
            <div class="input-group">
              <span class="input-group-addon glyphicon glyphicon-search"></span>
              <input type="text"
                     name="SearchDualList"
                     ng-model="search1"
                     class="form-control"
                     placeholder="search" />
            </div>
          </div>
        </div>
        <ul class="list-group">
          <a class="list-group-item"
             href=""
             data-id="{{item.id}}"
             ng-click="item.active = !item.active"
             ng-class="{active: item.active}"
             ng-repeat="item in list1|filter: search1">{{item.title}}</a>
        </ul>
        <p ng-if="(list1 | filter:search1).length == 0">Sin Datos</p>
      </div>
    </div>
    <div class="list-arrows col-md-1 text-center">
      <button ng-click="moveItemToLeftList()"
              class="btn btn-default btn-sm move-left">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </button>
      <button ng-click="moveItemToRightList()"
              class="btn btn-default btn-sm move-right">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </button>
    </div>
    <div class="dual-list list-right col-md-5">
      <div class="well">
        <div class="row">
          <div class="col-md-3">
            <div class="checkbox">
              <label>
                <input type="checkbox"
                       ng-model="checked2"
                       ng-click="selectAllItem(list2, checked2)">
                    Todo {{getAllSelectedItems(list2).length}}/{{list2.length}}
              </label>
            </div>
          </div>
          <div class="col-md-9">
            <div class="input-group">
              <span class="input-group-addon glyphicon glyphicon-search"></span>
              <input type="text"
                     name="SearchDualList"
                     ng-model="search2"
                     class="form-control"
                     placeholder="search" />
            </div>
          </div>
        </div>
        <ul class="list-group">
          <a class="list-group-item"
             href=""
             data-id="{{item.id}}"
             ng-click="item.active = !item.active"
             ng-class="{active: item.active}"
             ng-repeat="item in list2|filter: search2">{{item.title}}</a>
        </ul>
        <p ng-if="(list2 | filter:search2).length == 0">Sin Datos</p>
      </div>
    </div>
  </div>
</div>

index.html

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" />
    <link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <dual-list data-list1="list1" data-list2="list2"></dual-list>
  </body>
</html>

样式.css

.dual-list .list-group {
    margin-top: 8px;
}
.list-arrows {
    padding-top: 100px;
}
.list-arrows button {
    margin-bottom: 20px;
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  border-color: white;
}
.input-group-addon {
  top: 0;
}