<!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>
angularjs select multiple="multiple" ng-repeat
效果图:
猜你喜欢
转载自franciswmf.iteye.com/blog/2281900
今日推荐
周排行