简单的下拉多选angularjs 实现

因为在工作中需要用到下拉多选的组件，查了一些资料，觉得有些组件挺复杂的，而我只要实现基本的功能，所以结合需求和资料，自己整合了一下，下面是完整的代码实现

(function ( angular ) {'use strict';angular.module( 'angularMultiSelect', [] ).directive("multiSelect", function($document){var template =  " {{selectedName}}";      template += "";template += "
全选
";template += "
";template += " {{item.name}}
";return {restrict:"AEC",template:template,scope:{type:"@",data:'=',itemClicked: '&',},link:function(scope, element, attrs, controller){//$compile(element.contents())(scope);},controller:function($scope){function contains(collection, target) {var containsTarget = false;collection.some(function(object){if (object === target) {containsTarget = true;return true;}return false;});return containsTarget;}  $document.on('click', function(e){if ($scope.drop){var  target = e.target.parentElement;var  parentFound = false;while (angular.isDefined(target) && target !== null && !parentFound) {if (!!target.className.split && contains(target.className.split(' '), 'multiSelectContainer') && !parentFound) {parentFound = true;}target = target.parentElement;}if (!parentFound) {$scope.$apply(function(){$scope.drop=false;});}}});   $scope.selectedName="";    $scope.selectedName="全选";                                              $scope.selecteditems = "";$scope.titleShow = true;$scope.isAll=true;var selecteditem = [];var selectedName=[];var item={id:"",name:""};var map = Array.prototype.map;var watch= $scope.$watch('data',function(newValue,oldValue,scope){if(newValue){                              selecteditem = map.call(newValue, function(value) { return value.id; });selectedName= map.call(newValue, function(value) { return value.name; }); watch(); } });$scope.selectAll=function($event,values){var checkbox = $event.target;var action = (checkbox.checked?'add':'remove');var map = Array.prototype.mapif(action == 'add' ){selecteditem = map.call(values, function(value) { return value.id; }); selectedName=map.call(values,function(value){return value.name;}); }else if(action == 'remove' ){ selecteditem = []; selectedName=[]; } ($scope.itemClicked|| angular.noop)({ $item: {id:selecteditem,name:selectedName}, $type: $scope.type, }); $scope.selectedName=selectedName.toString();  } $scope.checkboxClick = function(item,$event){ console.log("innerdrop"+ $scope.drop); $scope.isAll=false; var idx = selecteditem.indexOf(item.id); if($scope.inputType ==="radio"){ selecteditem = []; } if (idx > -1) { selecteditem.splice(idx, 1); selectedName.splice(idx,1); console.log('names'+selectedName); }else { selecteditem.push(item.id); selectedName.push(item.name); } //$scope.selecteditems = selecteditem.join(); if(selecteditem.length>0){ $scope.titleShow = false }else{ $scope.titleShow = true } ($scope.itemClicked|| angular.noop)({ $item:{id:selecteditem,name:selectedName}, $type: $scope.type, }); $scope.selectedName=selectedName.toString();  } $scope.isChecked = function (item){ return selecteditem.indexOf(item) > -1; } $scope.dropDowncontent = true; $scope.toggleAction = function(){ $scope.drop=!$scope.drop; } $scope.hideSelect=function(){ $scope.drop=false; } } } }); })( angular );

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！