Angular使用详解-简单的页面

来源：互联网发布：863软件孵化器靠谱吗编辑：程序博客网时间：2024/05/29 11:42
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        body        {            width: 1600px;            margin: 0 auto;            margin-top: 50px;            text-align: center;        }        table        {            width: 1000px;            margin: auto;            margin-top: 50px;        }        div        {            margin: auto;            margin-top: 20px;            width: 500px;            height: 500px;            background: #c0a16b;        }        .b        {            background: red;            width: 200px;            height:200px;        }        button        {            background: #2aabd2;        }        .red        {            border: 1px solid red;        }    </style>    <script src="../angular-1.5.5/angular.js"></script>    <script>        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.data=                [                    {done:false,sname:"iPhone4",name:"张三",phone:"15111111111",price:4999,city:"北京",time:"08-01 10:00",zhuai:"发货"},                    {done:false,sname:"小米6",name:"李四",phone:"1522222222",price:2999,city:"北京",time:"08-02 10:00",zhuai:"发货"},                    {done:false,sname:"华为P9",name:"王五",phone:"15333333333",price:3999,city:"上海",time:"09-03 10:00",zhuai:"已发货"},                    {done:false,sname:"oppo r11",name:"赵六",phone:"154444444444",price:4999,city:"天津",time:"09-05 10:00",zhuai:"已收货"},                    {done:false,sname:"vivo",name:"周七",phone:"15555555555",price:2999,city:"重庆",time:"10-04 10:00",zhuai:"已发货"},                ]            //隐藏            $scope.show=false;            //新增订单            $scope.newD=function () {                $scope.show=true;            }            $scope.uname="";            $scope.uphone="";            $scope.ucity="选择城市";            //城市查询            $scope.citys=function (item) {                if( $scope.ucity!="选择城市")                {                    if( $scope.ucity==item.city)                    {                        return true;                    }                    else                    {                        return false;                    }                }                else                {                    return true;                }            }            //状态查询            $scope.uzhuai="状态";            //城市查询            $scope.zhuais=function (item) {                if( $scope.uzhuai!="状态")                {                    if( $scope.uzhuai==item.zhuai)                    {                        return true;                    }                    else                    {                        return false;                    }                }                else                {                    return true;                }            }            //状态变化            $scope.zhuang=function (index) {                if($scope.data[index].zhuai=="发货")                {                    $scope.data[index].zhuai="已发货";                }                if($scope.data[index].zhuai=="已发货")                {                    $scope.data[index].zhuai="已收货";                }            }            //排序            $scope.sortname="";            $scope.pai=function (name) {                $scope.sortname=name;            }            //批量删除            $scope.delete=function () {                var n=0;                for(var i=0;i<$scope.data.length;i++)                {                    if($scope.data[i].done==true)                    {                        $scope.data.splice(i,1);                        n++;                        i--;                    }                }                if(n==0)                {                    alert("请勾选!!!");                }            }            //全选反选            $scope.check=false;            $scope.checkAll=function () {                for(var i=0;i<$scope.data.length;i++)                {                    if( $scope.check==true)                    {                        $scope.data[i].done=true;                    }                    else                    {                        $scope.data[i].done=false;                    }                }            }            //全选按钮状态            $scope.checks=function () {                var n=0;                for(var i=0;i<$scope.data.length;i++)                {                    if($scope.data[i].done==true)                    {                        n++;                    }                    else                    {                        n--;                    }                }                if(n==$scope.data.length)                {                    $scope.check=true;                }                else                {                    $scope.check=false;                }            }            //日期之间            $scope.kai="开始月份";            $scope.jie="结束月份";            $scope.pan=function () {                if( $scope.kai!="开始月份" &&  $scope.jie!="结束月份")                {                    //装换为int类型判断                    var kai=parseInt( $scope.kai);                    var jie=parseInt($scope.jie);                    for(var i=0;i<$scope.data.length;i++)                    {                        //拆分时间                        var arr=$scope.data[i].time.split("-");                        var da=parseInt(arr[0]);                        console.log(da);                        //判断                        if(da>=kai && da<=jie)                        {                            return true;                        }                        else                        {                            return false;                        }                    }                }                else                {                    return true;                }            }            //添加新客户            $scope.newsname="";            $scope.newname="";            $scope.newphone="";            $scope.b=false;            $scope.redcheck=false;            $scope.newcity="请选择";            $scope.tj=function () {                if($scope.newsname==""||  $scope.newsname.length<6 || $scope.newsname.length>20 || $scope.newname.length<4 || $scope.newname>16 || $scope.newcity=="请选择")                {                    $scope.b=true;                    $scope.redcheck=true;                }                else                {                    $scope.data.push({done:false,sname: $scope.newsname,name:$scope.newname,phone:$scope.newphone,price:1999,city:$scope.newcity,time:"",zhuai:"发货"})                }            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><input type="text" placeholder="用户名搜索" ng-model="uname"><input type="text" placeholder="手机号搜索" ng-model="uphone"><select ng-model="ucity">    <option>选择城市</option>    <option>北京</option>    <option>上海</option>    <option>天津</option>    <option>重庆</option></select><select ng-model="uzhuai">    <option>状态</option>    <option>待发货</option>    <option>发货</option>    <option>已收货</option>    <option>已发货</option></select><select ng-model="kai">    <option>开始月份</option>    <option>01</option>    <option>02</option>    <option>03</option>    <option>04</option>    <option>05</option>    <option>06</option>    <option>07</option>    <option>08</option>    <option>09</option>    <option>10</option>    <option>11</option>    <option>12</option></select>-<select ng-model="jie" ng-change="pan()">    <option>结束月份</option>    <option>01</option>    <option>02</option>    <option>03</option>    <option>04</option>    <option>05</option>    <option>06</option>    <option>07</option>    <option>08</option>    <option>09</option>    <option>10</option>    <option>11</option>    <option>12</option></select><br/><br/><br/><button ng-click="newD()">新增订单</button><button ng-click="delete()">批量删除</button><table    border="1px solide #000">    <thead>    <tr>        <th><input type="checkbox" ng-model="check" ng-click="checkAll()"></th>        <th>下标<span><button ng-click="pai('$index')">排序</button></span></th>        <th>商品名称</th>        <th>用户名</th>        <th>手机号</th>        <th>价格<span><button ng-click="pai('price')">排序</button></span></th>        <th>城市</th>        <th>下单时间<span><button ng-click="pai('time')">排序</button></span></th>        <th>状态</th>    </tr>    </thead>    <tbody>    <tr ng-repeat="item in data|filter:{'name':uname}|filter:{'phone':uphone}|filter:citys|filter:zhuais|orderBy:sortname|filter:pan">        <td><input type="checkbox" ng-model="item.done" ng-click="checks()"></td>        <td>{{$index}}</td>        <td>{{item.sname}}</td>        <td>{{item.name}}</td>        <td>{{item.phone}}</td>        <td>{{item.price|currency:"￥"}}</td>        <td>{{item.city}}</td>        <td>{{item.time}}</td>        <td ng-click="zhuang($index)">{{item.zhuai}}</td>    </tr>    </tbody></table><div ng-show="show">    <h2>新增订单</h2>    商品名:<input type="text" placeholder="6-20个字符" ng-class="{red:redcheck}" ng-model="newsname"><br/><br/>    用户名:<input type="text" placeholder="4-16个字符"  ng-class="{red:redcheck}" ng-model="newname"><br/><br/>    手机号:<input type="text"  ng-class="{red:redcheck}" ng-model="newphone"><br/><br/>    城市:    <select ng-model="newcity">        <option>请选择</option>        <option>北京</option>        <option>上海</option>        <option>天津</option>        <option>重庆</option>        </option>    </select><br/><br/>    <div class="b" ng-show="b">        <p>商品名不能为空!</p>        <p>商品名必须是6-12个字符!</p>        <p>用户名不能为空!</p>        <p>用户名必须是4-16个字符!</p>        <p>手机号不能为空!</p>    </div>    <button ng-click="tj()">提交</button></div></body></html>
阅读全文
0 0