首先是html页面的编写：
<!doctype html><html ng-app="myModule">
<head>
<meta charset="utf-8">
<title>学生信息管理</title>
//需要用到的一些库，要加载的
<script src="bower_components/angular/angularjs"></script>
<script src="bower_components/ng-table/dist/ng-tablejs"></script>
<script src="bower_components/ng-table-export/ng-table-exportjs"></script>
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" >
<script src="module/scripts/controllers/Formjs"></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">{{studentName}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentName"></div>
</td>
<td title="'Id'">
<span ng-if="!student$edit">{{studentId}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentId"></div>
</td>
<td title="'Grade'">
<span ng-if="!student$edit">{{studentGrade}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentGrade"></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=angularmodule('myModule',['ngTable'])
controller('FormController',function($scope,ngTableParams,$sce){
$scopestudents=[
{Name:'小李',Id:'201401201',Grade:'计算机技术'},
{Name:'李磊',Id:'201401202',Grade:'计算机技术'},
{Name:'夏津',Id:'201401203',Grade:'计算机技术'},
{Name:'杭州',Id:'201401204',Grade:'计算机技术'}
];
$scopeaddStudent=function(){ //添加学生函数
$scopestudentspush({Name:$scopenewName,Id:$scopenewId,Grade:$scopenewGrade});
$scopenewName='';
$scopenewId='';
$scopenewGrade='';
};
$scopedeleteStudent=function(student){ //删除一行的内容
$scopestudentssplice($scopestudentsindexOf(student),1);
};
});
如果是团队开发实力较强可利用angular的思想以及目前提供的功能重写一些常用的功能和函数库组件之类的，这样的话就可以不需要引入jQuery。如果是个人开发想在短期内实现一些好的效果，我觉得jQuery很多东西还是值得借鉴的，尤其是动画功能。另外angular的思想是面向数据编程，通过数据双向绑定去控制DOM，但是也存在一些情况需要修改DOM的，例如点击某个按钮控制页面其他已有部分的行为，这可以通过指令完成，在指令中选择需要控制的dom节点然后 *** 作它。具体来讲，angular思想和jquery差别较大，需要权衡利弊，尽量去用原生js加angular已有功能实现，一些复杂功能，考虑用angular封装成指令，在指令中利用jQuery提供的某些函数功能也可以。
在angularjs中获取元素的id的方法：
<div id="{{ 'object-' + myScopeObjectindex }}"></div>
这样实际解析后的代码：
<div id="object-1"></div>
这样的id就可以通过document获取了。
利用javascript
写一个在页面点击加减按钮实现数字的累加。
简略的html大概如此。看得懂就好不要在意这些细节啊
<input
type="button"
value="+"
onclick="jia(this)"
/>
<label
class="num">0</label>
<input
type="button"
value="-"
onclick="jian(this)"
/>
样子是这样的
javascript
代码如下
<script
type="text/javascript">
function
jia(a)
{
var
nextnode
=
anextElementSibling;//获取下一个节点
alert(nextnodeinnerHTML);
var
a
=
parseInt(nextnodeinnerHTML)
a
+=
1;
nextnodeinnerHTML
=
a;
}
function
jian(a)
{
var
previousnode
=
apreviousElementSibling;
var
a
=
parseInt(previousnodeinnerHTML)
a
-=
1;
a
=
a
>
0
a
:
0;
previousnodeinnerHTML
=
a;
}
</script>
解释一下：
function
jian(a）和
function
jia(a)就是当前点击的对象了。在onclick事件接的方法里加了this;
-
nextElementSibling
获取当前节点的下一个节点(获得下一个兄弟节点)
-
previousElementSibling
获取当前节点的上一个节点
注意：
IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie
中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextElementSibling了。
上面的解释的意思的使用
nextElementSibling
和previousElementSibling
获得下一个兄弟节点和上一个兄弟节点，可以去掉换行，空格上面之类的，直接找到我们标签元素。但是下面的两个
nextSibling
previousSibling
也是得下一个兄弟节点和上一个兄弟节点的，只是在IE中好用
--------------------关键字解释
parseInt
转化功能。
a
=
a
>
0
a
:
0;----三元表达式。
以上就是关于angularjs中怎么给表格点击添加数据全部的内容，包括:angularjs中怎么给表格点击添加数据、引入angularjs之后 原生的js *** 作是否还能使用、如何获取html元素id，通过angularjs等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）