工作过程中需要做一个类似下面图上的2行4列的导航栏,遂自己谢了directive,方便工作中用,还不是很美观。
他支持 3列、4列、5列。
directive.js
/**
* ay-box
* html:
* <ay-box col="4" content="{{vm.content}}" ></ay-box>
* js:
* var obj = [
* {icon:'ion-heart', title:'a', state:'main'},
* {icon:'ion-ios-help', title:'b', state:'main'},
* {icon:'ion-ios-star', title:'c', state:'main'},
* {icon:'ion-ios-reload', title:'d', state:'main'},
* {icon:'ion-ios-refresh', title:'e', state:'main'},
* {icon:'ion-ios-download', title:'f', state:'main'},
* {icon:'ion-ios-browsers', title:'g', state:'main'}
* ];
* vm.content = JSON.stringify(obj)
*/
var drt = angular.module('starter.directive', []);
drt.directive('ayBox',function(){
return {
restrict:'EA',
templateUrl:'view/directives/ayBox.html',
scope:{
content:'@',
col:'@'
},
controller:function($scope,$state){
function chageTo2d(arr,col){
var ans=[];
var r, c,len = arr.length;
for(var i= 0;i<len; i++){
r = parseInt(i/col);
c = (i%col);
ans[r] = ans[r] || [];
ans[r][c] = arr[i];
}
while(c+1<col){
ans[r][++c]={};
}
return ans;
}
var styleRow3 = {
'background-color': 'white',
'margin': '0 0',
'padding-bottom': '29%',
'width': '25%',
'height':'0',
'border':'solid',
'border-width': '1px',
'border-color': 'gainsboro'
};
var styleRow4 = Object.assign({},styleRow3);
styleRow4['padding-bottom'] = '24%';
var styleRow5 = Object.assign({},styleRow3);
styleRow5['padding-bottom'] = '18%';
var styleDiv3 = {'padding-top': '20%'};
var styleDiv4 = {'padding-top': '18%'};
var styleDiv5 = {'padding-top': '3%'};
var vm = $scope.vm = {};
if($scope.col==3){
vm.styleRow = styleRow3;
vm.styleDiv = styleDiv3;
}else if($scope.col==4){
vm.styleRow = styleRow4;
vm.styleDiv = styleDiv4;
}else if($scope.col==5){
vm.styleRow = styleRow5;
vm.styleDiv = styleDiv5;
}else{
console.log('error! ay-box col must is one of 3,4,5');
return ;
}
var COLORS = ['Tomato','SkyBlue','green','orange','PaleGreen'];
var content = eval($scope.content);
content.forEach(function(e,i){
e.color = COLORS[i%5];
});
vm.rows = chageTo2d(content, $scope.col);
vm.go = function(name){
$state.go(name);
}
}
}
});
ayBox.html:
<div class="row" style="padding:0;" ng-repeat="row in vm.rows track by $index">
<div class="col" ng-style="vm.styleRow" ng-click="vm.go(item.state)" ng-repeat="item in row track by $index">
<div align="center" ng-style="vm.styleDiv">
<i class="icon {{item.icon}}" style="font-size: 38px;color: {{item.color}}"></i><br>
{{item.title}}
</div>
</div>
</div>
controller中:
var obj = [
{icon:'ion-heart', title:'快速注册', state:'tab.signupFront'},
{icon:'ion-ios-help', title:'b', state:'main'},
{icon:'ion-ios-star', title:'c', state:'main'},
{icon:'ion-ios-reload', title:'d', state:'main'},
{icon:'ion-ios-refresh', title:'e', state:'main'},
{icon:'ion-ios-download', title:'f', state:'main'},
{icon:'ion-ios-browsers', title:'g', state:'main'},
{icon:'ion-ios-browsers', title:'g', state:'main'}
];
$scope.content = JSON.stringify(obj)