Angular Bootsrap Multi选择添加删除组件模型

问题描述

有人可以告诉我在angular中是否有任何插件，用于添加删除模态组件的引导程序，如下图所示

can anyone please tell me whether there is any plugin in angular, bootstrap for add remove modal component like as shown below in the picture

推荐答案

我不知道具有Bootstrap样式的即插即用模块，但是基本实现非常简单: http://jsfiddle.net/andytjoslin/aeSaJ/3/

I don't know a ready-to-intstall module with bootstrap styling, but the basic implementation is quite simple: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];
}

在此处添加引导程序类应该很容易.

it should be easy to add bootstrap classes here.

这篇关于Angular Bootsrap Multi选择添加删除组件模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！