基于ionic的自定义指令----选择框

来源：互联网发布：米格21知乎编辑：程序博客网时间：2024/05/29 04:51

前提：学习视频连接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事件

页面展示：
展示图片

阅读全文

0 0