1.使用angularjs自定义指令实现多选下拉框
2.样式使用bootstrap.css
3.图标使用font-awesome.css
使用方法:
创建节点:<angular-mult-select options="datas" ng-model="selectModel"></angular-mult-select>
传入下拉选择的数据:datas: [{id: 1, isSel: false, value: "张珊" }, { id: 2, isSel: false, value: "张三" }]
接收数据:Model:selectModel: [1,2] // 数组中的数据为datas中id值
注:下面代码可直接粘贴测试效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angular js 多选下拉框自定义指令</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="./lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<angular-mult-select options="datas" ng-model="selectModel"></angular-mult-select>
</div>
<button ng-click="onclickShowModel()">点击显示数据</button>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
myController.init($scope);
});
let myController = (function() {
let MyController = function() {};
MyController.prototype = {
selectModel: [],
scope: null,
datas: [{
id: 1,
isSel: false,
value: "张珊"
},
{
id: 2,
isSel: false,
value: "张三"
},
{
id: 3,
isSel: false,
value: "李四"
},
{
id: 4,
isSel: false,
value: "历史"
},
{
id: 5,
isSel: false,
value: "中午"
},
{
id: 6,
isSel: false,
value: "丽水"
},
{
id: 7,
isSel: false,
value: "中国"
},
{
id: 8,
isSel: false,
value: "中毒"
},
],
init: function(scope) {
this.scope = scope;
this.dataModelInit();
this.bindEvent();
},
dataModelInit: function() {
this.scope.selectModel = [1,2];
this.scope.datas = this.datas;
},
/**
* 事件方法
*/
bindEvent: function() {
let self = this;
self.scope.onclickShowModel = function() {
console.log(self.selectModel);
};
},
};
return new MyController();
}());
let templateStr = '<div id="selectModel" class="col-md-4">' +
'<div id="dataModel" class="form-control" ng-click="hidden=!hidden">' +
'<span class="btn-info" ng-repeat="item in dataModelArr" style="padding: 5px;margin-left:5px ;border-radius: 2px;">' +
'<b ng-bind="item.value"></b>' +
'<i class="fa fa-close text-danger" ng-click="onClickDelete(item)" style="margin-left: 5px;"></i>' +
'</span>' +
'</div>' +
'<div ng-hide="hidden" style="height: auto;border: 1px solid #ccc;width: 98%;position: absolute;z-index: 999;">' +
'<div class="col-md-12" ng-repeat="item in options" ng-click="onClickShowData(item)" style="cursor: pointer;">' +
'<i class="fa text-danger" ng-class="{\'true\':\'fa-check-square-o\',\'false\':\'fa-square-o\'}[item.isSel]" style="font-size: 18px;"></i>' +
'<span data-id="{{item.id}}" ng-bind="item.value" style="margin-left: 15px;"></span>' +
'</div>' +
'</div>' +
'</div>';
app.directive('angularMultSelect', function() {
return {
restrict: 'AE', //attribute or element
scope: {
options: '=options',
'ngModel': '='
},
template: templateStr,
// replace: true,
link: function(scope, elem, attr, ctrl) {
scope.hidden = true;
scope.dataModelArr = [];
scope.ngModel = scope.ngModel ? scope.ngModel : [];
scope.$watch("options", function(data) {
if (data) {
angular.forEach(data, function(item, index, arr) {
if (scope.ngModel.includes(item.id)) {
scope.dataModelArr.push(item);
scope.options[index].isSel = true;
}
});
}
});
scope.onClickShowData = function(row) {
if (row.isSel) {
row.isSel = false;
angular.forEach(scope.dataModelArr, function(data, index, arr) {
if (data.id == row.id) {
scope.dataModelArr.splice(index, 1);
scope.ngModel.splice(index, 1);
}
});
} else {
row.isSel = true;
scope.dataModelArr.push(row);
scope.ngModel.push(row.id);
}
}
scope.onClickDelete = function(row) {
row.isSel = false;
angular.forEach(scope.dataModelArr, function(data, index, arr) {
if (data.id == row.id) {
scope.dataModelArr.splice(index, 1);
scope.ngModel.splice(index, 1);
}
});
}
}
}
});
</script>
</html>