angularjs select multiple="multiple" ng-repeat

Franciswmf

浏览: 796971 次
性别:
来自: 上海

最近访客更多访客>>

gglzf4

fengqingyebai

kouok

xubbsun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AngularJS

效果图：

<!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>