README

此指令允许创建具有相关选项的多个下拉列表。所选选项的值添加到可用于 AngularJS 的数组中。

依赖关系

AngularJS - v1.3.8
jQuery - v1.11.1
Lo-Dash - v2.4.1
Bootstrap - v3.3.1

###演示

###用法

它是如何工作的？很简单。指令告诉编译器附加特定行为并从模板创建下拉元素。首先，确保包含所有上述依赖项以及 ui-select.js 指令和 selectCrt.js 控制器。

首先添加 select 元素的 HTML 标记

    <group-select update="setSelected(select.box,item)"  
        data="selectData" 
        single="selectedItem" 
        close="removeSelect(select.box)"  
        ng-repeat="select in selectGroup">
    </group-select>

以下属性将数据绑定到控制器作用域

data="selectData" - 下拉数据

single="selectedItem" - 默认选择的元素

update="setSelected(select.box,item)" - 通过给定的下拉列表指定选择的元素

close="removeSelect(select.box) - 移除给定的下拉列表

在 selectCrt.js 中初始化 select 元素的数据并指定选择的项

  $scope.selectData = [
      {id:'0',  name: 'Select product type', shade:''},
      {id:'123',name:'black',  shade:'dark'},
      {id:'245',name:'white',  shade:'light'}     
  ];

 $scope.selectedItem = $scope.selectData[0];

控制器中的三个方法响应用户行为

添加新的下拉列表
获取所选元素的值
移除下拉列表

要添加新的下拉列表，必须触发 addSelect() 方法，在这个例子中是按钮点击。该方法将新项（选择框）添加到数组中。唯一的计数器有助于在检索/更新值或从元素数组中移除下拉列表时引用特定的下拉列表。

  $scope.selectGroup = [];
  $scope.box = 0;
  $scope.addSelect = function() {
    $scope.selectGroup.push({box:$scope.box});
    $scope.box++;
  };

响应选择行为的 setSelected() 方法从下拉列表获取或更新所选值。在这个例子中省略了默认值。每个下拉列表将存储在所选值数组中，在更改事件中它将被相应地更新。使用 Lo-Dash 库管理数组中的所选值。

  $scope.setSelected = function (index,item) {
      
      if(item.shade !== ""){
      
        $scope.currentItem = item;
      
        if(!_.find($scope.allItems,{'index':index}) ){

            $scope.allItems.push({index:index,item:item});

        }else{

            _.remove($scope.allItems, function(it) { return it.index === index; });
            $scope.allItems.push({index:index,item:item});
        }
      
      }
        
  };

要移除下拉列表，方法 removeSelect() 会响应此操作。首先从值数组中移除给定下拉列表的所选值，然后移除下拉列表本身。

  $scope.removeSelect = function(box){
      
       $scope.currentItem = [];

       _.remove($scope.allItems, function(it) { return it.index === box; });

      if(_.find($scope.selectGroup,{'box':box}) ){
          _.remove($scope.selectGroup, function(it) { return it.box === box; });
      }
  };

###支持

请在 GitHub 上创建问题

###许可证

MIT 许可证 (MIT)

特此授予任何获得本软件及其相关文档文件（“软件”）副本的人免费使用软件的权利，不受限制，包括但不限于以下权利：使用、复制、修改、合并、发布、分发、再许可和/或销售软件的副本，并允许向软件提供者提供软件的人这样做，前提是符合以下条件

alexpechkarev / angular-ui-select

维护者

详细信息

README

依赖关系