AngularJs技术实现简单的表格管理

AngularJS 是一个 Javascript 框架。它可通过<”script”>标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML&＃xff0c;且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 Javascript 框架。它是一个以 Javascript 编写的库。
AngularJS 是以一个 Javascript 文件形式发布的&＃xff0c;可通过 script 标签添加到网页中&＃xff1a;

<script src&＃61;"http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">script>

我们建议把脚本放在 <”body”> 元素的底部。
这会提高网页加载速度&＃xff0c;因为 HTML 加载不受制于脚本加载 &＃xff0c;同时,给用户的体验也很好
各个 angular.js 版本下载地址&＃xff1a; >https://github.com/angular/angular.js/releases

什么是 AngularJS&＃xff1f;有哪些特性?
AngularJS 使得开发现代的单一页面应用程序&＃xff08;SPAs&＃xff1a;Single Page Applications&＃xff09;变得更加容易。
*AngularJS 把应用程序数据绑定到 HTML 元素。
*AngularJS 可以克隆和重复 HTML 元素。
*AngularJS 可以隐藏和显示 HTML 元素。
*AngularJS 可以在 HTML 元素”背后”添加代码。
*AngularJS 支持输入验证。

这是一个AngularJs 的API参考文档
http://www.runoob.com/angularjs/angularjs-reference.html
平时多看看API文档,有助于帮助你提高开发效率

效果就这个样子

这是一个简单的表格管理,简单的不能再简单了,不过,没有做数据的传输和交互,
只限于做一个演示页面!
//第一步就要导入AngularJs的类库
<style type&＃61;"text/css">*{margin: 0px auto;padding: 0px;}#addlist{background-color: #5CD6FF;border-radius: 5px;}#delechange{background-color: #5CD6FF;border-radius: 5px;}table{width: 800px;line-height: 40px;text-align: center;}.true{background: #30FC30;}.false{background: #FCFC30;}#table2{width: 800px;text-align: left;}style>
<center><br /><div><input type&＃61;"button"id&＃61;"addlist" value&＃61;"新增订单" ng-click&＃61;"addnewlist()"/><input type&＃61;"button"id&＃61;"delechange" value&＃61;"批量删除" ng-click&＃61;"deletechange()" /><input type&＃61;"text" ng-model&＃61;"searchbyname" ng-keydown&＃61;"checkuserbyname($event)" placeholder&＃61;"按商品名查询..." /><input type&＃61;"text" ng-model&＃61;"searchbytel" ng-keydown&＃61;"checkuserbytel($event)" placeholder&＃61;"按手机号查询..." /><select ng-model&＃61;"checkstate" ng-change&＃61;"changecheck()" ng-init&＃61;"checkstate&＃61;&＃39;--按状态查询--&＃39;"><option>--按状态查询--option><option>已发货option><option>未发货option>select>div><br /><table border&＃61;"1px" cellspacing&＃61;"0px" cellpadding&＃61;"0px"><tr style&＃61;"background: #999999;"><th><input type&＃61;"checkbox" ng-model&＃61;"state" ng-click&＃61;"checkall(state)"/>th><td>id<input type&＃61;"button" ng-click&＃61;"sortbyid()" style&＃61;"background:#5CD6FF ;" value&＃61;"排序"/>td><td>商品名td><td>用户名td><td>手机号td><td>价格<input type&＃61;"button" ng-click&＃61;"sortbyprice()" style&＃61;"background:#5CD6FF ;" value&＃61;"排序"/>td><td>城市td><td>下单时间<input type&＃61;"button" ng-click&＃61;"sortbytime()" style&＃61;"background:#5CD6FF ;" value&＃61;"排序"/>td><td>状态td>tr><tr ng-repeat&＃61;"user in users"><td><input type&＃61;"checkbox" name&＃61;"del" ng-click&＃61;"changestate($index)"/>td><td>{{user.id}}td><td>{{user.goodname}}td><td>{{user.username}}td><td>{{user.tel}}td><td>{{user.price|currency:"&＃xffe5;"}}td><td>{{user.city}}td><td>{{user.time|date:&＃39;yyyy-MM-dd HH:mm:ss&＃39;}}td><td><input type&＃61;"button" class&＃61;"{{user.state}}" value&＃61;"{{user.state|selffilter}}" ng-click&＃61;"changevalue($index)" />td>tr>table><br /><br /><fieldset ng-show&＃61;"show" style&＃61;"width: 800px;"><legend>添加订单信息legend><table id&＃61;"table2" border&＃61;"0px" cellspacing&＃61;"0px" cellpadding&＃61;"0px"><tr><th>商品名th><td><input type&＃61;"text" ng-model&＃61;"addgoodname" />td><td><span id&＃61;"addgoodname">span>td>tr><tr><th>用户名th><td><input type&＃61;"text" ng-model&＃61;"addusername" />td><td><span id&＃61;"addusername">span>td>tr><tr><th>手机号th><td><input type&＃61;"text" ng-model&＃61;"addtel" />td><td><span id&＃61;"addtel">span>td>tr><tr><th>价格th><td><input type&＃61;"text" ng-model&＃61;"addprice" />td><td><span id&＃61;"addprice">span>td>tr><tr><th>城市th><td><select ng-model&＃61;"addcity" ng-change&＃61;"checkcity()" ng-init&＃61;"addcity&＃61;&＃39;请选择城市&＃39;"><option>请选择城市option><option value&＃61;"北京">北京option><option value&＃61;"上海">上海option><option value&＃61;"广州">广州option>select>td><td><span id&＃61;"addcity">span>td>tr>table><input type&＃61;"button" value&＃61;"保存" ng-click&＃61;"save()" />fieldset>center>body><--
逻辑代码,不过我没有写入到js文件中,因为懒--><script type&＃61;"text/Javascript">var app &＃61; angular.module("myapp",[]);app.controller("myctrl",function($scope){//初始化订单数据var usertemp&＃61;[{"flag":false,"id":2001,"goodname":"HuaweiMate9","username":"张三","tel":"13525565588","price":"4899","city":"北京","time":new Date(1513142424231),"state":true},{"flag":false,"id":3006,"goodname":"xiaomi6","username":"王红","tel":"18525575588","price":"3635","city":"郑州","time":new Date(1513251204231),"state":true},{"flag":false,"id":5312,"goodname":"一加5T","username":"赵小龙","tel":"13524065588","price":"5180","city":"北京","time":new Date(1513252564231),"state":false},{"flag":false,"id":2132,"goodname":"oppo-R11","username":"李强","tel":"17625865588","price":"3190","city":"上海 ","time":new Date(1513256364231),"state":false},];$scope.users&＃61;usertemp;//改变删除按钮所在行的状态值$scope.changestate&＃61;function($index){usertemp[$index].flag &＃61; !usertemp[$index].flag;$scope.users&＃61;usertemp;}//批量删除$scope.deletechange&＃61;function(){//倒序删除避免一次无法删除的情况for (var i &＃61; usertemp.length-1 ; i >&＃61; 0; i--) {var flag &＃61; usertemp[i].flag;//选中状态值var state &＃61; usertemp[i].state;//发货状态值if (flag&＃61;&＃61;true&&state&＃61;&＃61;true) {usertemp.splice(i,1);//从原始数组里删除掉}}//重新赋值$scope.users&＃61;usertemp;}//选择所有$scope.checkall&＃61;function(){//获取所有name为cbs的input按钮var cbs &＃61; $("input[name &＃61; del]");for (var i &＃61; 0; i //把全选按钮的状态值传递给数据cbs[i].checked &＃61; $scope.state;}$scope.users&＃61;usertemp;}//按照时间排序var timeflag&＃61;true;$scope.sortbytime&＃61;function(){if (timeflag) {usertemp.sort(function(x,y){return x.time - y.time;});}else{usertemp.sort(function(x,y){return y.time - x.time;});}timeflag &＃61; !timeflag;$scope.users&＃61;usertemp;}//按id排序var idflag&＃61;true;$scope.sortbyid&＃61;function(){if (idflag) {usertemp.sort(function(x,y){return x.id - y.id;});}else{usertemp.sort(function(x,y){return y.id - x.id;});}idflag &＃61; !idflag;$scope.users&＃61;usertemp;}//按价格排序var priceflag&＃61;true;$scope.sortbyprice&＃61;function(){if (priceflag) {usertemp.sort(function(x,y){return x.price - y.price;});}else{usertemp.sort(function(x,y){return y.price - x.price;});}priceflag &＃61; !priceflag;$scope.users&＃61;usertemp;}//通过电话模糊查询用户$scope.checkuserbytel&＃61;function($event){var code &＃61; $event.keyCode;//定义新的临时数组var newusers&＃61; [];var code &＃61; $event.keyCode;//定义新的临时数组if (code&＃61;&＃61;13) {//获取输入框的内容var searchbytel &＃61; $scope.searchbytel;//判断内容为空if (searchbytel&＃61;&＃61;""||searchbytel&＃61;&＃61;null) {alert("请输入查询内容");return;}//根据得到的内容遍历数组中的数据for (var i &＃61; 0; i var tel &＃61; usertemp[i].tel;if (tel.indexOf(searchbytel)!&＃61;-1) {newusers.push(usertemp[i]);}}//判断是否为空if (newusers.length&＃61;&＃61;0) {alert("未查找到内容");return;}//重新赋值$scope.users&＃61;newusers;}}//通过商品名查询$scope.checkuserbyname&＃61;function($event){var code &＃61; $event.keyCode;//定义新的临时数组var newusers&＃61; [];if (code&＃61;&＃61;13) {//获取输入框的内容var searchbyname &＃61; $scope.searchbyname;//判断内容为空if (searchbyname&＃61;&＃61;""||searchbyname&＃61;&＃61;null) {alert("请输入内容");return;}//根据得到的内容遍历数组中的数据for (var i &＃61; 0; i var goodname &＃61; usertemp[i].goodname;if (goodname.indexOf(searchbyname)!&＃61;-1) {newusers.push(usertemp[i]);}}//判断是否为空if (newusers.length&＃61;&＃61;0) {alert("未查找到内容");return;}//重新赋值$scope.users&＃61;newusers;}}//新增订单$scope.addnewlist&＃61;function(){$scope.show&＃61;true;}//发货$scope.changevalue&＃61;function($index){usertemp[$index].state &＃61; !usertemp[$index].state;$scope.users&＃61;usertemp;}//查询发货状态$scope.changecheck&＃61;function(){var newuser&＃61;[];var state &＃61; $scope.checkstate;if (state&＃61;&＃61;"已发货") {for (var i &＃61; 0; i var userstate &＃61; usertemp[i].state;if (userstate&＃61;&＃61;true) {newuser.push(usertemp[i]);}}}if (state&＃61;&＃61;"未发货") {for (var i &＃61; 0; i var userstate &＃61; usertemp[i].state;if (userstate&＃61;&＃61;false) {newuser.push(usertemp[i]);}}}if (state&＃61;&＃61;"--按状态查询--") {for (var i &＃61; 0; i //城市var addcity&＃61;"";$scope.checkcity&＃61;function(){var city &＃61; $scope.addcity;addcity&＃61;city;}//添加用户$scope.save&＃61;function(){var addname &＃61; $scope.addgoodname;var addusername &＃61; $scope.addusername;var addtel &＃61; $scope.addtel;var addprice &＃61; $scope.addprice;var obj&＃61;/^[0-9]&＃43;$/;if (addname&＃61;&＃61;undefined) {$("#addgoodname").text("请输入商品名");return;}else{$("#addgoodname").text("");}if (addusername&＃61;&＃61;undefined) {$("#addusername").text("请输入用户名");return;}else{$("#addusername").text("");}if (addtel&＃61;&＃61;undefined||obj.test(addtel)&＃61;&＃61;false) {$("#addtel").text("请输入电话");return;}else{$("#addtel").text("");}if (addprice&＃61;&＃61;undefined||obj.test(addprice)&＃61;&＃61;false) {$("#addprice").text("请输入价格");return;}else{$("#addprice").text("");}var id &＃61; Math.random()*1000 &＃43; 9000;id &＃61; parseInt(id, 10);var time &＃61; new Date();var newuser&＃61;{"flag":false,"id":id,"goodname":addname,"username":addusername,"tel":addtel,"price":addprice,"city":addcity,"time":time,"state":false}usertemp.push(newuser);$scope.users&＃61;usertemp; $scope.show&＃61;false;}});//自定义过滤器,过滤发货状态app.filter("selffilter",function(){return function(input){//传递过来的状态值if (input&＃61;&＃61;true) {return "已发货";} else{ return "未发货";}return input;}});script>