前提:学习视频连接http://www.imooc.com/video/3085
功能:
- 自定义选择框弹出样式
- 支持单选按钮和多选按钮的形式
- data:输入的数据
- result:返回结果
- type:[“checkbox”,”radio”]
代码如下:
html:
<div class="item" >
<span class="input-label">风格:{{search.style}}</span>
<k-select data="{{chest.styleList}}" type="checkbox" result ="search.style"></k-select>
</div>
css:
/**弹出窗popup 可y向滚动 无titlecss*/
.team-popup .popup-head{
display: none;
}
.team-popup .popup{
padding: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
}
.team-popup .popup-body{
padding: 0;
overflow-y:scroll;
}
/*自定义kmdSelect*/
.kmd-select {
position: relative;
height: 28px;
width: 100%;
border: 1px solid #bdbdbd;
background-color: #f8f8f8;
font-size: 14px;
line-height: 26px;
padding-left: 6px;
}
.kmd-select img{
position: absolute;
height: 16px;
top: 6px;
right: 5px;
width: 8px;
}
.kmd-checkbox{
border: 0;
padding-left: 20px;
}
.kmd-checkbox input{
height: 22px;
width: 22px;
float: left;
}
.kmd-checkbox div{
float: left;
height: 22px;
padding-left: 16px;
font-size: 17px;
line-height: 22px;
}
.kmd-but{
padding:0 !important;
}
.kmd-but button{
padding: 0;
width: 50%;
background-color:white;
color:black;
}
.kmd-but button + button{
color:#4b9efa;
}
js:
.directive('kSelect',function($ionicPopup,$rootScope){
var template = {
checkbox:
'<div class="item kmd-checkbox" ng-repeat="item in tempList">' +
'<input type="checkbox" ng-checked="isChecked(item)" ng-click="updateSelection($event,item)">' +
'<div>{{item.name}}</div>' +
'</div>' +
'<div class="item kmd-but">' +
'<button class=\'button\' ng-click=\'cancel()\' >取消</button>' +
'<button class=\'button\' ng-click=\'submit()\' >确认</button>' +
'</div>',
radio:
'<div class="item kmd-checkbox" ng-repeat="item in tempList">' +
'<input type="radio" ng-checked="isChecked(item)" ng-click="updateSelection($event,item)">' +
'<div>{{item.name}}</div>' +
'</div>' +
'<div class="item kmd-but">' +
'<button class=\'button\' ng-click=\'cancel()\' >取消</button>' +
'<button class=\'button\' ng-click=\'submit()\' >确认</button>' +
'</div>'
} ;
return {
restrict:'AE',
replace:true,
scope:{
test:'&',
result:'='
},
template:'<div class="kmd-select" ng-click="show()" >' +
'{{showData}}' +
'<img ng-src="./img/home/unfold.png">' +
'</div>',
link:function(scope,element,attr){
scope.showData ='--选择--';
var data = JSON.parse(attr.data);
var temp = template[attr.type];
scope.show = function(){
scope.tempList = data;
scope.myPopupDetail = $ionicPopup.show({
cssClass: 'team-popup',
template: temp,
scope: scope
});
};
//取消
scope.cancel = function(){
scope.myPopupDetail.close();
};
//确认
scope.submit = function(){
var d = scope.selected.join(',');
scope.showData = d;
scope.result = d;
scope.myPopupDetail.close();
};
//数据处理
scope.selected = [] ;
scope.isChecked = function(item){
return scope.selected.indexOf(item.name) >= 0 ;
} ;
scope.updateSelection = function($event,item){
var checkbox = $event.target ;
var checked = checkbox.checked ;
if(checked){
scope.selected.push(item.name) ;
}else{
var idx = scope.selected.indexOf(item.name) ;
scope.selected.splice(idx,1) ;
}
};
}
}
})
遇到的坑:
- label标签中,不支持ng-click事件
页面展示: