您的位置：首页 > Web前端 > AngularJS

初写指令（根据参数动态显示表格栏数)

2015-01-06 17:59 295 查看 
指令.js
'use strict';var editDirectives = angular.module('editDirectives', []);editDirectives.directive('editDirect', function() {return {restrict: 'ACEM',transclude : false,replace : false,scope: {customerInfo: '=info',col : '=col'},templateUrl: 'test_part1.html',link : function(scope, element, attrs) {scope.btnFunction = function btnFunction(i) {switch (i){case "启用":{console.log("启用"+scope.col);break;}case "删除":{console.log("删除");break;}case "增加":{console.log("增加");break;}}}scope.changeCol = function changeCol(value){var Table = document.getElementsByTagName("table");var myTable = Table[0];//行数var rowLength = myTable.rows.length;//列集合var cellArray = [];//列下标var xx=0;if (value>=1 && value<5) {//拿到列集合for (var j=0; j<rowLength;j++) {for (var i=0; i<myTable.rows[j].cells.length; i++){var cell = myTable.rows[j].cells[i];cellArray.push(cell);}}var cellValue = parseInt(cellArray.length/value);//删除所有行for (var i=0;i<rowLength;i++){myTable.deleteRow(0);}//重新排列行列for (var j=0;j<cellValue;j++) {var row=document.createElement("tr");myTable.appendChild(row);for (i=0;i<value;i++){myTable.rows[j].appendChild(cellArray[xx]);xx+=1;}}//判断余数if (cellArray.length%value != 0){var row=document.createElement("tr");myTable.appendChild(row);myTable.rows[myTable.rows.length-1].appendChild(cellArray[cellArray.length-1]);for (var i=1; i<value; i++){var cell = document.createElement("td");myTable.rows[myTable.rows.length-1].appendChild(cell);}}}}}}});
module.js
'use strict';var myApp = angular.module('editApp', [ 'editCtrloller', 'editDirectives']);
ctrl.js
'use strict';var editCtrloller = angular.module('editCtrloller', []);editCtrloller.controller('editCtrl',['$scope', function($scope) {$scope.infoArray = [{name:"晨曦",department:"财务部",position:"主管"}];$scope.colValue = 1;}]);
html
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><meta name="author" content="yulin"/><title></title><script src="../../lib/angular/angular.js"></script><script src="app.js"></script><script src="controller.js"></script><script src="directive.js"></script><link href="../../lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"></head><body ng-app="editApp"><div ng-controller="editCtrl"><edit-direct info="infoArray" col="colValue"></edit-direct></div></body></html>
templateUrl.html
按多少栏排列：<input ng-model="colValue" type="number" ng-blur="changeCol(colValue)"><br/><br/><div><table id="myTable" class="table table-bordered" ng-repeat="i in customerInfo"><tr><td>编号:<input type="number" value="{{$index}}"></td></tr><tr><td>姓名:<input type="text" value="{{i.name}}"></td></tr><tr><td>部门:<input type="text" value="{{i.department}}"></td></tr><tr><td>职位:<input type="text" value="{{i.position}}"></td></tr></table></div>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                angular
                                                angularjs
                                                javascript
                                                web
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航