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;
                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>