Angular Bootstrap Multi选择Add Remove Component Model

Question

任何人都可以告诉我是否有任何插件角度，bootstrap添加删除模态组件，如下图所示

Answer 1

您可以使用基于Angularjs的 ngListSelect 插件来实现此目标

<强> Working Demo

只需导入

缩小的

<script type="text/javascript" src="https://cdn.rawgit.com/nidhishkrishnan/ngListSelect/master/ngListSelect.min.js"></script>

非精缩

<script type="text/javascript" src="https://cdn.rawgit.com/nidhishkrishnan/ngListSelect/master/ngListSelect.js"></script>

将ngListSelect添加为您应用的依赖关系

angular.module('your-app', ['ngListSelect']);

并在模板中使用ngListSelect指令，如下所示

<ng-list-select selected-list="selectedList" key="name" available-list="availableList" button-style="olive" panel-style="olive"></ng-list-select>

Answer 2

我不知道具有引导样式的可立即安装模块，但基本实现非常简单： http://jsfiddle.net/andytjoslin/aeSaJ/3/

<div ng-app>
    <div ng-controller="fling">
    <select multiple="true" ng-model="selected" ng-options="item for item in selectedItems">
    </select>
    _________________
    <select  multiple="true" ng-model="available" ng-options="item for item in availableItems">
    </select>
        <br />
    <button ng-click="moveItem(selected[0], selectedItems, availableItems)">
        Move sel --&gt;
    </button>
    <button ng-click="moveItem(available[0], availableItems, selectedItems)"> 
        &lt;-- Move sel
    </button>
        <br />
    <button ng-click="moveAll(selectedItems, availableItems)">
        Move all --&gt; 
    </button>
    <button ng-click="moveAll(availableItems, selectedItems)">
         &lt;-- Move all
    </button>
    {{selectedItems}}
    {{availableItems}}

    </div>
</div>


function fling($scope) {

    $scope.moveItem = function(item, from, to) {
        var idx=from.indexOf(item);
        if (idx != -1) {
            from.splice(idx, 1);
            to.push(item);      
        }
    };
    $scope.moveAll = function(from, to) {
        angular.forEach(from, function(item) {
            to.push(item);
        });
        from.length = 0;
    };

    $scope.selectedItems = ['a','b','c'];
    $scope.availableItems = [1,2,3];
}

在这里添加bootstrap类应该很容易。