angular.js的表格指令
html
div.col-sm-12
table.table.table-bordered.table-condensed.table-hover.table-striped.dataTable.no-footer
thead
tr(role="row")
th(ng-repeat="item in config track by $index" ng-bind="item.title")
th(ng-if="!transHide") 操作
tbody
tr(ng-repeat="(key,ls) in list track by $index")
td.sorting_1(ng-repeat="item in config track by $index" ng-bind="{{item.data}}")
td(ng-transclude='' ng-if="!transHide")
tr(ng-if="list.length==0")
td(colspan="{{transHide?config.length:(config.length+1)}}") 没有任何数据
js
angular.module('app').directive('ltTable', ['$rootScope',function($rootScope){
// Runs during compile
return {
// name: '',
// priority: 1,
// terminal: true,
scope: {
list:'=data',
config:'=',
dictionaries:'='
}, // {} = isolate, true = child, false/undefined = no change
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
templateUrl: 'app/dist/directive/table/table.html',
// replace: true,
transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function($scope, iElm, iAttrs, controller,transclude) {
$scope.globalConfig=$rootScope.globalConfig;
// console.log(transclude())
var tansNode=transclude()[0];
if(!tansNode||(!tansNode.tagName&&!tansNode.textContent)){
$scope.transHide=true;
}
}
};
}]).directive('ltTableOut', [function(){
// Runs during compile
return {
// name: '',
// priority: 1,
// terminal: true,
scope:{
name:"@"
}, // {} = isolate, true = child, false/undefined = no change
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
templateUrl: 'app/dist/directive/table/tableouter.html',
// replace: true,
transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function($scope, iElm, iAttrs, controller) {
}
};
}]);;
子html
div.row
div.col-lg-12.ui-sortable
div.box.ui-sortable-handle
header
div.icons
i.glyphicon.glyphicon-th
h5(ng-bind="name")
div.body
div.dataTables_wrapper.form-inline.dt-bootstrap.no-footer(ng-transclude="")
页面样式
angular.js的表格指令的更多相关文章
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular.js之自定义指令学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- angular.js的ng-app 指令定义一个 AngularJS 应用程序。
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...
- angular.js的时间指令
最后样式 html .input-group(style="max-width:150px") input.form-control(uib-datepicker-popup=&q ...
- angular.js创建自定义指令-demo3
html: <!doctype html><html ng-app="myModule"> <head> <meta charset=&q ...
- Angular JS中$timeout的用法及其与window.setTimeout的区别
$timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- 史上最全的Angular.js 的学习资源
Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...
随机推荐
- sql 语句写的行列转换
以前面试老遇到一个行列转换的问题,今天没事,顺便记录一下 假设有这样一张表,如下图,创建表就不说了,直接建或者SQL语句都行 sql语句如下 --第一种 select name as 姓名, max( ...
- html中引入调用另一个html的方法
html中引入调用另一个html的方法,尝试了好几种,都列出来: 其中第一种是最好的,其他的方法,可以尝试看看,是不是适合你当前项目 一.div+$("#page1").load( ...
- reactjs点滴记录
reactjs: render方法后面,}后面,不要加分号,加逗号,因为是对属性赋值,否则报错: var Test = React.createClass({ render:function(){re ...
- 性能测试培训:定位jvm耗时函数
性能测试培训:定位jvm耗时函数 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90882 ...
- node.js的路由
app.js: app.use('/', routes);app.use('/reg', routes);app.use('/u/:user',routes);app.use('/post',rout ...
- 简聊iOS支付集成(支付宝和微信支付)
一.支付集成是什么 1.现在大部分app都有快捷支付功能,支付集成将第三方支付平台集成到自己的项目中,能够完成自己项目中的支付功能, 二.支付集成的使用 <1>.支付宝: 下载SDK和De ...
- jmeter 使用jmeter 录制 手机APP脚本
1.打开jmeter.鼠标右击工作台.添加HTTP代理服务器 2.设置配置jmeter.手机无线网络.(目标控制器也可以选择加到线程组中) 3.添加查看结果树 4.启动完成后.操作手机.jmeter就 ...
- canvas与svg区别
canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...
- 京东笔试---通过考试(DP)
题目描述 小明同学要参加一场考试,考试一共有n道题目,小明必须作对至少60%的题目才能通过考试.考试结束后,小明估算出每题作对的概率,p1,p2,...,pn,你能帮他算出他通过考试的概率吗 ...
- Swift try try! try?使用和区别
Swift try try! try?使用和区别 一.异常处理try catch的使用 1. swift异常处理 历史由来 Swift1.0版本 Cocoa Touch 的 NSError ,Swif ...