angularjs select multiple="multiple" ng-repeat

来源：互联网发布：winpcap是什么软件编辑：程序博客网时间：2024/05/17 05:11

效果图：

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

查看图片附件

0 0

angularjs select multiple=&quot;multiple&quot; ng-repeat

angularjs select multiple="multiple" ng-repeat