angularjs select multiple="multiple" ng-repeat

最新推荐文章于 2024-09-11 15:33:18 发布

揽峰moc

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量745

点赞数

分类专栏： angularjs 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/big1989wmf/article/details/84769506

版权

angularjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图：

[img]http://dl2.iteye.com/upload/attachment/0115/6842/89c344d7-e1b7-3751-aadb-4bf49f5f3bee.png[/img]

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<script src="editor-app/libs/angular_1.2.13/angular.min.js"></script>
<script src="editor-app/libs/angular_1.2.13/angular-animate.min.js"></script>
<link rel="stylesheet" href="editor-app/css/style-common.css">
<script type="text/javascript">
	angular.module('app', [])
	.controller('MyCtrl', ['$scope','myCache',function($scope,myCache){
		$scope.multiSelectList=[
		                        {id:1,name:'red',group:'china',selected:false},
		                        {id:2,name:'yellow',group:'china',selected:false},
		                        {id:3,name:'grey',group:'china',selected:false},
		                        {id:4,name:'pink',group:'china',selected:false},
		                        {id:5,name:'purple',group:'china',selected:false}
		                        ];
		/*默认选中:default selected*/
		var arr=["2","3","5"];
		angular.forEach(arr,function(val,idx){
			var keep=true;
			angular.forEach($scope.multiSelectList,function(value,index){
				if(keep){
					if(value.id==val){
						value.selected=true;
						keep=false;
					}
				}
			})
		});
		myCache.put("selected",arr);
		$scope.myMultiSelectModel=myCache.get("selected");
		/*单项点击事件：item click*/
		$scope.itemClickFun=function(x){
			var obj=myCache.get("selected");
			if(x.selected){
				x.selected=false;
				var nObj=[];
				angular.forEach(obj,function(val,idx){
					if(val!=x.id){
						nObj.push(val.toString());
					}
				});
				myCache.put("selected",nObj);
			}else{
				x.selected=true;

				if(""==obj||null==obj){
					obj.push(x.id.toString());
				}else{
					var bFlag=true;
					angular.forEach(obj,function(val,idx){
						if(bFlag){
						obj.push(x.id.toString());
						bFlag=false;
						}
					});
				}
				myCache.put("selected",obj);
			}
			$scope.myMultiSelectModel=myCache.get("selected");
		}

	}]);
	angular.module('app').factory('myCache', function($cacheFactory) {
		 return $cacheFactory('myData');
	});
</script>
</head>
<!-- body #s -->
<body ng-controller="MyCtrl">
 <select id="stId" multiple="multiple" ng-model="myMultiSelectModel" size="8" aria-describedby="basic-addon2">
     <option ng-repeat="multi in multiSelectList" value='{{multi.id}}'  ng-selected="{{multi.selected}}"  ng-click="itemClickFun(multi)">{{multi.name}}</option>
</select>
<br>
<h4>多选select选中项={{myMultiSelectModel}}</h4>
</body>
<!-- body #e -->
</html>