AngularJS 实现 Table的一些操作(示例大于实际)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/angular.js"></script>
<style type="text/css">
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
td,
th {
height: 40px;
width: 90px;
border: 1px solid #ccc;
text-align: center;
}
input {
height: 100%;
width: 100%;
border: none;
}
.readonly {
background: green;
}
.active {
background: #ddd;
}
td.options {
width: 400px;
text-align: left;
}
td.options>input {
width: 100px;
}
</style>
</head> <body ng-app="mapp"> <table ng-controller="mtable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>学号</th>
<th>兴趣</th>
<th>Options</th>
</tr> <tr ng-repeat="item in items" ng-controller="row">
<td>
<input type="text" ng-model="item.name" ng-readonly="varlist.isreadonly" value={ {item.name}} ng-class="{true:'inactive',false:'active'}[varlist.isreadonly]" placeholder="name">
</td>
<td>
<input type="text" ng-model="item.age" ng-readonly="varlist.isreadonly" value={ {item.age}} ng-class="{true:'inactive',false:'active'}[varlist.isreadonly]" placeholder="age">
</td>
<td>
<input type="text" ng-model="item.id" ng-readonly="varlist.isreadonly" value={ {item.id}} ng-class="{true:'inactive',false:'active'}[varlist.isreadonly]" placeholder="id">
</td>
<td>
<input type="text" ng-model="item.interest" ng-readonly="varlist.isreadonly" value={ {item.interest}} ng-class="{true:'inactive',false:'active'}[varlist.isreadonly]" placeholder="interseting">
</td>
<td class="options">
<!-- 编辑 -->
<edit></edit>
<!-- 删除当前行 -->
<delete></delete>
<!-- 放弃所有编辑 -->
<reset></reset>
</td>
</tr>
<tr>
<!-- 增加一行 -->
<td colspan="5">
<add></add>
</td>
</tr>
</table>
<script type="text/javascript">
var app = angular.module("mapp", []);
app.controller("mtable", function($scope) {
// 数据源
$scope.items = [{
name: "张三",
age: 20,
id: 111,
interest: "看书"
}, {
name: "李四",
age: 22,
id: 222,
interest: "写字"
}, {
name: "王二小",
age: 23,
id: 333,
interest: "电影"
}, {
name: "隔壁老王",
age: 5,
id: 444,
interest: "泡妞"
}];
// 为 reset功能而做的准备，ng中数组的复制，注意使用 angular.copy()和不使用的效果
$scope.resetArr = angular.copy($scope.items); // 接收删除事件，使用 splice()而不是slice()
$scope.$on("remove", function(event, data) {
$scope.items.splice(data, 1);
}); // ng-repeat 重复元素上面定义的ng-controller互不影响
}).controller("row", function($scope) {
$scope.varlist = {
isreadonly: true
}
// 接收edit事件，因为不用jquery，所以使用ng-readonly指令来操作
$scope.$on("edit", function() {
$scope.varlist.isreadonly = false;
});
});
// 下面是四个指令 app.directive("edit", function() {
return {
restrict: "E",
replace: true,
// 这里是在模版中使用ng-click绑定事件，请试试在指令 上绑定事件的方式，有坑
template: "<input type = 'button' value = 'edit' ng-click='edit()'>",
link: function(scope, element, attr) {
scope.edit = function() {
// 传递的true值是给 $scope.varlist.isreadonly 使用的，意思是改变只读状态
scope.$emit("edit", true);
} }
}
}).directive("delete", function() {
return {
restrict: "E",
replace: true,
template: "<input type = 'button' value = 'delete' ng-click='remove($index)'>",
link: function(scope, element, attr) {
scope.remove = function($index) {
scope.$emit("remove", $index); }
}
}
}).directive("reset", function() {
return {
restrict: "E",
replace: true, template: "<input type = 'button' value = 'reset' ng-click='reset($index)'>",
link: function(scope, element) {
//代码很简单，但是你丫就是想不起来使用angualr.copy()
scope.reset = function($index) {
scope.items[$index] = angular.copy(scope.resetArr[$index]);
} }
}
}).directive("add", function() {
return {
restrict: "E",
template: "<button ng-click = 'add()'>增加新行</button>",
replace: true,
link: function(scope) {
scope.add = function() {
// 数据驱动
scope.items.push({});
}
}
}
});
</script>
</body>
</html> 本来编辑了一堆话，一不小心没保存，现在又不想重写了。
AngularJS 实现 Table的一些操作(示例大于实际)的更多相关文章
- [转]AngularJS 实现 Table的一些操作(示例大于实际)
本文转自:http://www.cnblogs.com/lin-js/p/linJS.html <!DOCTYPE html> <html> <head> < ...
- java-redis集合数据操作示例(三)
redis系列博文,redis连接管理类的代码请跳转查看<java-redis字符类数据操作示例(一)>. 一.集合类型缓存测试类 public class SetTest { /** * ...
- Hudi 数据湖的插入，更新，查询，分析操作示例
Hudi 数据湖的插入,更新,查询,分析操作示例 作者:Grey 原文地址: 博客园:Hudi 数据湖的插入,更新,查询,分析操作示例 CSDN:Hudi 数据湖的插入,更新,查询,分析操作示例 前置 ...
- AngularJS快速入门指南19：示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- C#文件的拆分与合并操作示例
C#文件的拆分与合并操作示例代码. 全局变量定义 ;//文件大小 //拆分.合并的文件数 int count; FileInfo splitFile; string splitFliePath; Fi ...
- java-redis列表数据操作示例(二)
接上篇博文<java-redis字符类数据操作示例(一)>,redis连接管理类的代码请跳转查看. 一.列表类型缓存测试类 public class ListTest { /** * 主测 ...
- AngularJS基于MVC的复杂操作案例
AngularJS基于MVC的复杂操作案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 文件操作示例脚本 tcl
linux 下,经常会对用到文件操作,下面是一个用 tcl 写的文件操作示例脚本: 其中 set f01 [open "fix.tcl" w] 命令表示 打开或者新建一个文件“fi ...
- 聊聊flink Table的groupBy操作
本文主要研究一下flink Table的groupBy操作 Table.groupBy flink-table_2.11-1.7.0-sources.jar!/org/apache/flink/tab ...
随机推荐
- F题（水题）
给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有数中,最大的数是多少. 例如: 1 7 6 3 1.i = 1, j = 3,对应的数为7 6 3,最大的数为7. ...
- Windows bat脚步同步时间
@echo onnet stop w32timew32tm /unregisterw32tm /registernet start w32timew32tm /config /manualpeerli ...
- webpack（二）解析es6并打包
一.前言 ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现.Babel是一个广泛使用的转码器, ...
- 《Andrew Ng深度学习》笔记2
神经网络基础 1.图计算 计算时有两种方法:正向传播和反向传播.正向传播是从底层到顶层的计算过程,逐步推出所求公式.反向传播是从顶层到底层,从已知的式子求出因变量的影响关系. 在这里用到的反向传播算法 ...
- POJ2248 Addition Chains 迭代加深
不知蓝书的标程在说什么,,,,于是自己想了一下...发现自己的代码短的一批... 限制搜索深度+枚举时从大往小枚举,以更接近n+bool判重,避免重复搜索 #include<cstdio> ...
- B. Cover Points Codeforces Round #511 (Div. 2)【数学】
题目: There are nn points on the plane, (x1,y1),(x2,y2),…,(xn,yn)(x1,y1),(x2,y2),…,(xn,yn). You need t ...
- python数据结构与算法之list
1. 数据结构的操作 作为一种包含元素的数据结构,需要提供一些“标准”操作: 创建和销毁 判断是否空,如果容量有限,还需判断是否满 向结构中加入元素或从中删除 访问结构里的元素 不同的编程语言可能影响 ...
- bzoj1076 奖励关 期望dp
题目传送门 题目大意:总共有k次弹出宝物的机会,宝物共有n种,弹出不同的宝物的概率相同的,是每个宝物都有价值,和选择这个宝物的限制(必须具有特定的宝物),问最后的最优期望是多少. 思路:“正向推概率, ...
- HDU6393(LCA + RMQ + 树状数组) n边图，两点最短距离 ， 修改边权
这道题的进阶版本 进阶版本 题意: 一个n个点,n条边的图,2中操作,1是将某条边的权值更改,2是询问两点的最短距离. 题解: 由于n个点,n条边,所以是树加一个环,将环上的边随意取出一条,就是1颗树 ...
- 112th LeetCode Weekly Contest Minimum Increment to Make Array Unique
Given an array of integers A, a move consists of choosing any A[i], and incrementing it by 1. Return ...