angularjs select multiple="multiple" ng-re
发布时间：2020-12-17 09:23:59 所属栏目：安全 来源：网络整理
导读：效果图： !DOCTYPE htmlhtml ng-app="app"headmeta charset="utf-8"script src="editor-app/libs/angular_1.2.13/angular.min.js"/scriptscript src="editor-app/libs/angular_1.2.13/angular-animate.min.js"/scriptlink rel="stylesheet" href="editor-app/
效果图：
<!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',{id:3,name:'grey',{id:4,name:'pink',{id:5,name:'purple',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,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,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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |