angularjs中怎么给表格点击添加数据

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs中怎么给表格点击添加数据相关的知识，希望对你有一定的参考价值。

    首先是html页面的编写：

    <!doctype html>
    <html ng-app="myModule">
    <head>
    <meta charset="utf-8">
    <title>学生信息管理</title>
    //需要用到的一些库，要加载的
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/ng-table/dist/ng-table.js"></script>
    <script src="bower_components/ng-table-export/ng-table-export.js"></script>
    <link rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" >
    <script src="module/scripts/controllers/Form.js"></script>
    </head>
    <body>
    <div ui-view></div>
    <div ng-controller="FormController">
    <h3>学生信息列表</h3>
    <br>
    <div>
    搜索：<input type="text" ng-model="titleFilter" placeholder="输入关键字">  //加上<tr ng-repeat="student in students|filter:titleFilter">实现了表格内容的检索。
    </div>
    <br>
    <table ng-table="tableParams" >
    <tr ng-repeat="student in students|filter:titleFilter"> //遍历每一个对象
    <td title="'Name'">
    <span ng-if="!student.$edit">student.Name</span>
    <div ng-if="student.$edit"><input type="text" ng-model="student.Name"></div>
    </td>
    <td title="'Id'">
    <span ng-if="!student.$edit">student.Id</span>
    <div ng-if="student.$edit"><input type="text" ng-model="student.Id"></div>
    </td>
    <td title="'Grade'">
    <span ng-if="!student.$edit">student.Grade</span>
    <div ng-if="student.$edit"><input type="text" ng-model="student.Grade"></div>
    </td>
    <td title="'Actions'" width="200">
    <a ng-if="!student.$edit" ng-click="student.$edit=true">Edit</a>
    <a ng-if="student.$edit" ng-click="student.$edit=false">Save</a>
    <a ng-click="deleteStudent(obj)" ng-if="student.$edit" >Delete</a>
    <!-- <a ng-click="addStudent()" ng-if="student.$edit" >Add</a> -->
    </td>
    </tr>
    </table>
    <div>
    <input type="text" ng-model="newName" placeholder="input Name" required/>
    <input type="text" ng-model="newId" placeholder="input Id" required/>
    <input type="text" ng-model="newGrade" placeholder="input Grade" required/>
    <input type="button" ng-click="addStudent()" value="Add" /> 
    </div>
    </div>
    </body>
    </html>

    接下来是js代码部分

    var myModule=angular.module('myModule',['ngTable']).
    controller('FormController',function($scope,ngTableParams,$sce)
    $scope.students=[
    Name:'小李',Id:'201401201',Grade:'计算机技术',
    Name:'李磊',Id:'201401202',Grade:'计算机技术',
    Name:'夏津',Id:'201401203',Grade:'计算机技术',
    Name:'杭州',Id:'201401204',Grade:'计算机技术'
    ];
    $scope.addStudent=function()       //添加学生函数
    $scope.students.push(Name:$scope.newName,Id:$scope.newId,Grade:$scope.newGrade);
    $scope.newName='';
    $scope.newId='';
    $scope.newGrade='';
    ;
    $scope.deleteStudent=function(student)   //删除一行的内容
    $scope.students.splice($scope.students.indexOf(student),1);
    ;
    );

 参考技术A app.directive("delete",function($document)
return
restrict:'AE',
require: 'ngModel',
link:function(scope, element, attrs,ngModel)
element.bind("click",function()
var id = ngModel.$modelValue.id;
alert("delete item where employee id:=" + id);
scope.$apply(function()
for(var i=0; i<scope.employees.length; i++)
if(scope.employees[i].id==id)
console.log(scope.employees[i])
scope.employees.splice(i,1);


console.log(scope.employees);
)
)


);

基本上就完工了。这里我没有用任何现成的angular 插件，这只是对angular基本原理的阐述，如有误导或者有能简单的方法请指教。 参考技术B 页面里ng-click="add()"
再写一个隐藏的<div ><input type="text" ng-model="add"><input type="button" value="submit" ng-click="submit"></div>目的是获取添加的数据

controller里面$scope. add=function()
div显示


$scope.submit=function()
var add=$scope.add
$http(
url:
params:add
..

).then(function()..)



我现在是这么写的 参考技术C 首先，我们先建立一些数据，当然你可以从你任何地方读出你的数据var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope)
$scope.name = 'World';
$scope.employees =[id:101, name:'John', phone:'555-1276',
id:102, name:'Mary', phone:'800-1233',
id:103,name:'Mike', phone:'555-4321',
id:104,name:'Adam', phone:'555-5678',
id:105,name:'Julie', phone:'555-8765',
id:106,name:'Juliette', phone:'555-5678'];
$scope.showEdit = true;
$scope.master = ;
<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>

<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>

<script src="jquery-1.11.0.min.js"></script>
<script src="ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="bootstrap.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="mycss.css" />
</head>

<body ng-controller="MainCtrl">
<h2>Inline Edit</h2>
<!--<input id="test" value="ddd"/>-->
<table>
<tr>
<th>name</th>
<th>phone</th>
<th></th>
</tr>
<tr ng-repeat="employee in employees">
<td>
<input type="text" id='txt_name_employee.id' ng-model="employee.name" class="inactive" readonly />
</td>
<td> <input type="text" ng-model="employee.phone" class="inactive" readonly /></td>
<td><edit ng-Model="employee" ng-show="showEdit"><a>Edit</a></edit>
<update ng-Model="employee" ng-show="!showEdit"><a>Update</a></update>
<cancel ng-Model="employee" ng-show="!showEdit"> | <a>Cencel</a></cancel>
| <delete ng-Model="employee"><a>Delete</a></delete>

</td>
</tr>
</table>
</body>

</html>

在这里，我们使用一个<table>来显示所有的employee的name和phone,为了简单，我们这里只对employee name进行修改。在这里，我们自定义三个标签，<edit>,<update>,<delete>
我们来看其中一个标签，<edit>,这里呢，我们用ng-Model来绑定employee这个对象。
这里，我们用angular的directive来对着三个标签进行事件的绑定
angular的dirctive主要作用于DOM对象，而且他可以对
Element Name (比如<edit></edit>) 对应于 E:
Attribute(比如<mytag edit=”express”></mytag> 对应于 A
Comment <!-- my comment –> 对应于 M
Class <link class=”mycssclass”></link> 对应于 C
默认对Attribute （A),
当我们有
app.directiv("edit", function()
return
restrict: "E"，
. . . .


);

意思是说，我们要找到叫Element=”edit”的DOM对象，这里就是<edit>,
当然你也可以携程 restrict: “AE”，那意思就是说要找到Element或者attribute = edit的DOM对象
这里你可以随便对AEMC进行组合。
当你找到之后呢，就要对这个DOM进行操作，对于我们来说，就是对他绑定一个click的事件
app.directive("edit", function()
return
restrict: "E",
link: function(scope,element)
element.bind("click",function(e)
alert("I am clicked for editing");
);


)

这个时候呢，当你点Edit的时候呢，click事件就会触发。

再往下呢就是对edit click事件的延伸，我们要得到employee name的inputbox，然后对他进行css的转换，比如当你click edit后，应该出现inputbox的css的inactive或者active的调整，并且移除readOnly

这里要注意一件事，就是angular.copy，为什么使用angular.copy?这个是为后面的cancel做准备的，当你放弃修改的时候，你希望你的值恢复成原样，这个时候，对于angularJS来说，是要对model恢复原样。如何恢复修改之前的model?最简单的方法就是创建一个$scope.master = 空的对象，然后在你click edit之后，马上把还没改变的model拷贝到这个空的master中去，把master作为一个临时的存储对象。

当我们click Edit之后，我们要隐藏Edit,而叫Update | Cancel出现。这个时候$scope.showEdit就用上了，在<edit>，<update>,<cancel>上面都有一个ng-show，这个flag用来指定这个元素是不是要显示。ng-show=”showEdit”这个值是绑定$scope.showEdit的。
Editapp.directive("edit",function($document)
return
restrict: 'AE',
require: 'ngModel',
link: function(scope,element,attrs,ngModel)
element.bind("click",function()
var id = "txt_name_" +ngModel.$modelValue.id;
scope.$apply(function()
angular.copy(ngModel.$modelValue,scope.master);
//console.log(scope.master);
)
//console.log(id);
var obj = $("#"+id);
obj.removeClass("inactive");
obj.addClass("active");
obj.removeAttr("readOnly");
scope.$apply(function()
scope.showEdit = false;
)
);


);

CSS
.inactive
border: none;
background-color: #fff;

.active
background-color: #fff;


下面，我们要给Update做事件的绑定。这里就没用什么可说的了。
Update
app.directive("update",function($document)
return
restrict: 'AE',
require: 'ngModel',
link: function(scope,element,attrs,ngModel)
element.bind("click",function()
alert(ngModel.$modelValue + " is updated, Update your value here.");
var id = "txt_name_" +ngModel.$modelValue.id;
var obj = $("#"+id);
obj.removeClass("active");
obj.addClass("inactive");
obj.attr("readOnly",true);
scope.$apply(function()
scope.showEdit = true;
)
)


)

在下面就是Cancel了，上面说过了，Cancel的时候要还原之前的值，这个时候呢，我们就用angular.copy把当时临时存储的$scope.master拷贝回model去
app.directive("cancel",function($document)
return
restrict: 'AE',
require: 'ngModel',
link: function(scope,element,attrs,ngModel)
element.bind("click",function()
scope.$apply(function()
angular.copy(scope.master,ngModel.$modelValue);
//console.log(ngModel.$modelValue);
)

var id = "txt_name_" +ngModel.$modelValue.id;
var obj = $("#"+id);
obj.removeClass("active");
obj.addClass("inactive");
obj.prop("readOnly",true);
scope.$apply(function()
scope.showEdit = true;
)
)


);

最后就是Delete了，其实永远都要记住的事Angular是MVC，所以你这里你不用操心删除table行这样的事，只要删除model中emploee.id = @id就可以了
Deleteapp.directive("delete",function($document)
return
restrict:'AE',
require: 'ngModel',
link:function(scope, element, attrs,ngModel)
element.bind("click",function()
var id = ngModel.$modelValue.id;
alert("delete item where employee id:=" + id);
scope.$apply(function()
for(var i=0; i<scope.employees.length; i++)
if(scope.employees[i].id==id)
console.log(scope.employees[i])
scope.employees.splice(i,1);


console.log(scope.employees);
)
)


);

基本上就完工了。这里我没有用任何现成的angular 插件，这只是对angular基本原理的阐述，如有误导或者有能简单的方法请指教。 参考技术D 　　Angular.js的数据绑定有很多种方式，对于tabular类型的数据比如如下JSON 格式，我们想显示出来
　　[ "comment": "鱼", "word": "Fish" , "comment": "海洋动物", "word": "sea animal" ]
　　一般情况下我们可以使用angular 的ng-repeat direvative来实现，比如
　　<div ng-controller="getBook"><br><p ng-repeat="x in books">Books： x.word+","+x.comment</p></div>
　　然后再controller 函数getBook中给books赋值
　　<script>
　　var myApp = angular.module("myApp",[]);
　　myApp.controller('getBook',function($scope) $scope.books = [ "comment": "鱼", "word": "Fish" , "comment": "海洋动物", "word": "sea animal" ];);
　　</script>
　　但这种方式不太适合数据记录比较多的情况，把数据放在单独的文件中是比较好的方式
　　经过自己实验，还可以用以下2种方法
　　利用$http的response来获取数据,比如Fish.json,其内容为
　　[ "comment": "鱼", "word": "Fish" , "comment": "海洋动物", "word": "sea animal" ]
　　把数据放在单独的js文件中，并赋值给一个json object变量，比如Fish.js，其内容为
　　var jsonBook = [ "comment": "鱼", "word": "Fish" , "comment": "海洋动物", "word": "sea animal" ]

　　<!DOCTYPE html>
　　<html ng-app="myApp"> <head> <meta charset="utf-8" /> <script src="js/angular-1.3.14.min.js"></script> <script src="data/Fish.js"></script> </head><body><div ng-controller="getBook"><br><p ng-repeat="x in books">Books： x.word+","+x.comment</p></div><script>
　　var myApp = angular.module("myApp",[]);

　　//方法1
　　myApp.controller('getBook',function($scope,$http) $http.get("data/Fish.json").success(function(response) $scope.books = response;);
　　);

　　//方法2, 需要在head部分引入 Fish.js
　　myApp.controller('getBook',function($scope) $scope.books = jsonBook;);

　　//方法3
　　myApp.controller('getBook',function($scope) $scope.books = [ "comment": "鱼", "word": "Fish" , "comment": "海洋动物", "word": "sea animal" ];
　　);
　　</script></body></html>

iView中表格(Table)添加点击行展开扩展说明的功能

参考技术A 先在data()的columns部分增加一列

然后在<Table>中，绑定每行点击事件@on-row-click

最后就是onExpand方法了

以上是关于angularjs中怎么给表格点击添加数据的主要内容，如果未能解决你的问题，请参考以下文章

angularjs在下拉框中添加选项动态显示

如何利用AngularJS动态创建表格和动态赋值

jquery给表格动态添加删除行后如何获取数据

怎么给EXCEL中的散点图加坐标轴标题

有一行表格，点击按钮后，如何再添加一行呀

微信公众号推文中如何自定义添加表格？