首页 > 代码库 > [转]AngularJS 实现 Table的一些操作(示例大于实际)
[转]AngularJS 实现 Table的一些操作(示例大于实际)
本文转自：http://www.cnblogs.com/lin-js/p/linJS.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script type="text/javascript" src=http://www.mamicode.com/"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=http://www.mamicode.com/{ {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=http://www.mamicode.com/{ {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=http://www.mamicode.com/{ {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=http://www.mamicode.com/{ {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 = http://www.mamicode.com/‘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 = http://www.mamicode.com/‘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 = http://www.mamicode.com/‘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的一些操作(示例大于实际)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。