angular js 多选下拉框自定义指令

最新推荐文章于 2024-05-07 21:56:32 发布

shareloke

最新推荐文章于 2024-05-07 21:56:32 发布

阅读量973

点赞数

本文链接：https://blog.csdn.net/wlpjlp/article/details/89284330

版权

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>

shareloke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular js 多选下拉框自定义指令

1.使用angularjs自定义指令实现多选下拉框2.样式使用bootstrap.css3.图标使用font-awesome.css使用方法：创建节点：<angular-mult-select options="datas" ng-model="selectModel"></angular-mult-select>传入下拉选择的数据：data...
复制链接

扫一扫