[转]AngularJS 实现 Table的一些操作(示例大于实际)
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[转]AngularJS 实现 Table的一些操作(示例大于实际)相关的知识，希望对你有一定的参考价值。
本文转自：http://www.cnblogs.com/lin-js/p/linJS.html
<!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中怎样实现点击页面的任意地方隐藏指定div