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

AngularJS 是一个 JavaScript 框架。它可通过<”script”>标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

我们建议把脚本放在 <”body”> 元素的底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载 ，同时,给用户的体验也很好

各个 angular.js 版本下载地址： >https://github.com/angular/angular.js/releases

什么是 AngularJS？有哪些特性?

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

*AngularJS 把应用程序数据绑定到 HTML 元素。

*AngularJS 可以克隆和重复 HTML 元素。

*AngularJS 可以隐藏和显示 HTML 元素。

*AngularJS 可以在 HTML 元素”背后”添加代码。

*AngularJS 支持输入验证。

这是一个AngularJs 的API参考文档

http://www.runoob.com/angularjs/angularjs-reference.html

平时多看看API文档,有助于帮助你提高开发效率

效果就这个样子

这是一个简单的表格管理,简单的不能再简单了,不过,没有做数据的传输和交互,
只限于做一个演示页面!
//第一步就要导入AngularJs的类库
<style type="text/css">
*{
margin: 0px auto;

4000
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="button"id="addlist" value="新增订单" ng-click="addnewlist()"/>
<input type="button"id="delechange" value="批量删除" ng-click="deletechange()" />
<input type="text" ng-model="searchbyname"  ng-keydown="checkuserbyname($event)" placeholder="按商品名查询..." />
<input type="text" ng-model="searchbytel" ng-keydown="checkuserbytel($event)"  placeholder="按手机号查询..." />
<select ng-model="checkstate" ng-change="changecheck()" ng-init="checkstate='--按状态查询--'">
<option>--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select>
</div><br />
<!--
订单的显示信息
-->
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr style="background: #999999;">
<th><input type="checkbox" ng-model="state" ng-click="checkall(state)"/></th>
<td>id<input type="button" ng-click="sortbyid()" style="background:#5CD6FF ;" value="排序"/></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<input type="button" ng-click="sortbyprice()" style="background:#5CD6FF ;" value="排序"/></td>
<td>城市</td>
<td>下单时间<input type="button" ng-click="sortbytime()" style="background:#5CD6FF ;" value="排序"/></td>
<td>状态</td>
</tr>
<tr ng-repeat="user in users">
<td><input type="checkbox" name="del" ng-click="changestate($index)"/></td>
<td>{{user.id}}</td>
<td>{{user.goodname}}</td>
<td>{{user.username}}</td>
<td>{{user.tel}}</td>
<td>{{user.price|currency:"￥"}}</td>
<td>{{user.city}}</td>
<td>{{user.time|date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td><input type="button" class="{{user.state}}" value="{{user.state|selffilter}}" ng-click="changevalue($index)" /></td>
</tr>
</table><br /><br />
<!--
添加新的订单
-->
<fieldset ng-show="show" style="width: 800px;">
<legend>添加订单信息</legend>
<table id="table2" border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<th>商品名</th>
<td>
<input type="text" ng-model="addgoodname" />
</td>
<td><span id="addgoodname"></span></td>
</tr>
<tr>
<th>用户名</th>
<td>
<input type="text" ng-model="addusername" />
</td>
<td><span id="addusername"></span></td>
</tr>
<tr>
<th>手机号</th>
<td>
<input type="text" ng-model="addtel" />
</td>
<td><span id="addtel"></span></td>
</tr>
<tr>
<th>价格</th>
<td>
<input type="text" ng-model="addprice" />
</td>
<td><span id="addprice"></span></td>
</tr>
<tr>
<th>城市</th>
<td>
<select ng-model="addcity" ng-change="checkcity()" ng-init="addcity='请选择城市'">
<option>请选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</td>
<td><span id="addcity"></span></td>
</tr>
</table>
<input type="button" value="保存" ng-click="save()" />
</fieldset>
</center>
</body>
<--
逻辑代码,不过我没有写入到js文件中,因为懒
-->
<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
//初始化订单数据
var usertemp=[
{"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=usertemp;
//改变删除按钮所在行的状态值
$scope.changestate=function($index){
usertemp[$index].flag = !usertemp[$index].flag;
$scope.users=usertemp;
}
//批量删除
$scope.deletechange=function(){
//倒序删除避免一次无法删除的情况
for (var i = usertemp.length-1 ; i >= 0; i--) {
var flag = usertemp[i].flag;//选中状态值
var state = usertemp[i].state;//发货状态值
if (flag==true&&state==true) {
usertemp.splice(i,1);//从原始数组里删除掉
}
}
//重新赋值
$scope.users=usertemp;
}
//选择所有
$scope.checkall=function(){
//获取所有name为cbs的input按钮
var cbs = $("input[name = del]");
for (var i = 0; i < usertemp.length; i++) {
usertemp[i].flag = $scope.state;//把全选按钮的状态值传递给数据
cbs[i].checked = $scope.state;
}
$scope.users=usertemp;
}
//按照时间排序
var timeflag=true;
$scope.sortbytime=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 = !timeflag;
$scope.users=usertemp;
}

//按id排序
var idflag=true;
$scope.sortbyid=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 = !idflag;
$scope.users=usertemp;
}
//按价格排序
var priceflag=true;
$scope.sortbyprice=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 = !priceflag;
$scope.users=usertemp;
}
//通过电话模糊查询用户
$scope.checkuserbytel=function($event){
var code = $event.keyCode;
//定义新的临时数组
var newusers= [];
var code = $event.keyCode;
//定义新的临时数组
if (code==13) {
//获取输入框的内容
var searchbytel = $scope.searchbytel;
//判断内容为空
if (searchbytel==""||searchbytel==null) {
alert("请输入查询内容");
return;
}
//根据得到的内容遍历数组中的数据
for (var i = 0; i < usertemp.length; i++) {
var tel = usertemp[i].tel;
if (tel.indexOf(searchbytel)!=-1) {
newusers.push(usertemp[i]);
}
}
//判断是否为空
if (newusers.length==0) {
alert("未查找到内容");
return;
}
//重新赋值
$scope.users=newusers;
}
}
//通过商品名查询
$scope.checkuserbyname=function($event){
var code = $event.keyCode;
//定义新的临时数组
var newusers= [];
if (code==13) {
//获取输入框的内容
var searchbyname = $scope.searchbyname;
//判断内容为空
if (searchbyname==""||searchbyname==null) {
alert("请输入内容");
return;
}
//根据得到的内容遍历数组中的数据
for (var i = 0; i < usertemp.length; i++) {
var goodname = usertemp[i].goodname;
if (goodname.indexOf(searchbyname)!=-1) {
newusers.push(usertemp[i]);
}
}
//判断是否为空
if (newusers.length==0) {
alert("未查找到内容");
return;
}
//重新赋值
$scope.users=newusers;
}
}
//新增订单
$scope.addnewlist=function(){
$scope.show=true;
}
//发货
$scope.changevalue=function($index){
usertemp[$index].state = !usertemp[$index].state;
$scope.users=usertemp;
}
//查询发货状态
$scope.changecheck=function(){
var newuser=[];
var state = $scope.checkstate;
if (state=="已发货") {
for (var i = 0; i < usertemp.length; i++) {
var userstate = usertemp[i].state;
if (userstate==true) {
newuser.push(usertemp[i]);
}
}
}
if (state=="未发货") {
for (var i = 0; i < usertemp.length; i++) {
var userstate = usertemp[i].state;
if (userstate==false) {
newuser.push(usertemp[i]);
}
}
}
if (state=="--按状态查询--") {
for (var i = 0; i < usertemp.length; i++) {
newuser.push(usertemp[i]);
}
}
$scope.users=newuser;
}
//城市
var addcity="";
$scope.checkcity=function(){
var city = $scope.addcity;
addcity=city;
}
//添加用户
$scope.save=function(){
var addname = $scope.addgoodname;
var addusername = $scope.addusername;
var addtel = $scope.addtel;
var addprice = $scope.addprice;
var obj=/^[0-9]+$/;
if (addname==undefined) {
$("#addgoodname").text("请输入商品名");
return;
}else{
$("#addgoodname").text("");
}
if (addusername==undefined) {
$("#addusername").text("请输入用户名");
return;
}else{
$("#addusername").text("");
}
if (addtel==undefined||obj.test(addtel)==false) {
$("#addtel").text("请输入电话");
return;
}else{
$("#addtel").text("");
}
if (addprice==undefined||obj.test(addprice)==false) {
$("#addprice").text("请输入价格");
return;
}else{
$("#addprice").text("");
}
var id = Math.random()*1000 + 9000;
id = parseInt(id, 10);
var time = new Date();
var newuser={"flag":false,"id":id,"goodname":addname,"username":addusername,"tel":addtel,"price":addprice,"city":addcity,"time":time,"state":false}

usertemp.push(newuser);
$scope.users=usertemp;
$scope.show=false;
}

});
//自定义过滤器,过滤发货状态
app.filter("selffilter",function(){
return function(input){
//传递过来的状态值
if (input==true) {
return "已发货";
} else{
return "未发货";
}
return input;
}
});
</script>