angular 总练习

最新推荐文章于 2021-08-16 09:07:23 发布
最新推荐文章于 2021-08-16 09:07:23 发布
阅读量254 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gybk123/article/details/78852465
版权
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            * {
                margin: 0 auto;
                padding: 0;
            }
            
            #box {
                width: 800px;
                height: 700px;
                background: gold;
            }
            
            #add {
                width: 100px;
                height: 35px;
                border-radius: 5px;
                margin-left: 20px;
            }
            
            #deles {
                width: 100px;
                height: 35px;
                border-radius: 5px;
            }
            
            #gnamecha {
                margin-left: 20px;
                width: 160px;
                height: 33px;
                border-radius: 5px;
            }
            
            #shoujihaocha {
                width: 160px;
                height: 33px;
                border-radius: 5px;
            }
            
            #zhuangtaicha {
                margin-left: 20px;
                width: 160px;
                height: 33px;
            }
            
            table {
                width: 750px;
                margin-top: 30px;
            }
            .false{
                background: yellow;
            }
            .true{
                background: green;
            }
        </style>
    </head>

    <body>
        <div id="box" ng-app="myApp" ng-controller="myCtrl">
            <header>
                <input type="button" id="add" value="新增订单" ng-click="add()" />
                <input type="button" id="deles" value="批量删除" ng-click="deles()" />
                <input type="text" placeholder="按商品名称查询" id="gnamecha" ng-model="gcha" ng-keydown="gnamecha($event)">
                <input type="text" placeholder="按手机号称查询" id="shoujihaocha" ng-model="scha" ng-keydown="shoujihaocha($event)">
                <select ng-model="zcha" ng-init="zcha = '--根据状态查询--'" ng-change="zhuangtaicha()">
                    <option>--根据状态查询--</option>
                    <option>已发货</option>
                    <option>未发货</option>
                </select>
            </header>
            <table border="1px" cellspacing="0" cellpadding="0">
                <tr>
                    <th><input type="checkbox" class="cl1"></th>
                    <th>id<input type="button" ng-click="idpai()" value="排序"></th>
                    <th>商品名</th>
                    <th>用户名</th>
                    <th>手机号</th>
                    <th>价格<input type="button" ng-click="pricepai()" value="排序"></th>
                    <th>城市</th>
                    <th>下单时间<input type="button" ng-click="timepai()" value="排序"></th>
                    <th>状态</th>
                </tr>
                <tr ng-repeat="good in goods">
                    <td><input type="checkbox" class="cl2" ng-click="dianji($index)"></td>
                    <td>{{good.id}}</td>
                    <td>{{good.gname}}</td>
                    <td>{{good.uname}}</td>
                    <td>{{good.shoujihao}}</td>
                    <td>{{good.price|currency:"￥"}}</td>
                    <td>{{good.city}}</td>
                    <td>{{good.time|date:"MM-dd hh-mm-ss"}}</td>
                    <td><input type="button" class="{{good.zhuangtai}}"  value="{{good.zhuangtai|myfilter}}"  ng-click="fahuo($index)"/></td>
                </tr>
            </table>
            <fieldset ng-show="xs">
                <legend>添加订单信息</legend>
                商品名:<input type="text" ng-model="gname" class="gname"/><span class="gnameT"></span><br />
                用户名:<input type="text" ng-model="uname" class="uname"/><span class="unameT"></span><br />
                手机号:<input type="text" ng-model="shoujihao" class="shoujihao"/><span class="shoujihaoT"></span><br />
                价格为:<input type="text" ng-model="price" class="price"/><span class="priceT"></span><br />
                城市:<select ng-model="city" ng-init="city='--选择城市--'" class="city">
                    <option>--选择城市--</option>
                    <option>山东</option>
                    <option>青岛</option>
                    <option>北京</option>
                </select><span class="cityT"></span><br />
                <input type="button" value="保存" ng-click="baocun()" />
            </fieldset>
        </div>

        <script type="text/javascript">
            var m = angular.module("myApp", []);
            m.controller("myCtrl", function($scope) {
                var arr = [{
                    
                    "id": 1,
                    "isChecked":false,
                    "gname": "柠檬",
                    "uname": "小猪",
                    "shoujihao": "15810203278",
                    "price": 5,
                    "city": "北京",
                    "time": 121345100000,
                    "zhuangtai": false
                }, {
                    
                    "id": 2,
                    "isChecked":false,
                    "gname": "西瓜",
                    "uname": "小狗",
                    "shoujihao": "15810204378",
                    "price": 6,
                    "city": "青岛",
                    "time": 1215110000,
                    "zhuangtai": false
                }, {
                    
                    "id": 3,
                    "isChecked":false,
                    "gname": "菠萝",
                    "uname": "小熊",
                    "shoujihao": "15810205566",
                    "price": 7,
                    "city": "上海",
                    "time": 1215120000,
                    "zhuangtai": false
                }, {
                    
                    "id": 4,
                    "isChecked":false,
                    "gname": "火龙果",
                    "uname": "小猫",
                    "shoujihao": "15810207788",
                    "price": 8,
                    "city": "单县",
                    "time": 1215130000,
                    "zhuangtai": false
                }];

                $scope.goods = arr;
                //添加开始
                $scope.add = function(){
                    $scope.xs = true;
                }
                $scope.baocun = function(){
                    var gname = $scope.gname;
                    var uname = $scope.uname;
                    var shoujihao = $scope.shoujihao;
                    var price = $scope.price;
                    var city = $scope.city;
                    if(gname == ""||gname == null){
                        $(".gnameT").html("商品名不能为空");
                        $(".gname").css({"border":"1px solid red"})
                        return;
                    }else{
                        $(".gnameT").html("");
                        $(".gname").css({"border":"1px solid black"})
                    }
                    
                    
                    if(uname == ""||uname == null){
                        $(".unameT").html("用户名不能为空");
                        $(".uname").css({"border":"1px solid red"})
                        return;
                    }else{
                        $(".unameT").html("");
                        $(".uname").css({"border":"1px solid black"})
                    }
                    
                    if(shoujihao == ""||shoujihao == null){
                        $(".shoujihaoT").html("手机号不能为空");
                        $(".shoujihao").css({"border":"1px solid red"})
                        return;
                    }else{
                        $(".shoujihaoT").html("");
                        $(".shoujihao").css({"border":"1px solid black"})
                    }
                    
                    
                    
                    if(price == ""||price == null){
                        $(".priceT").html("价格不能为空");
                        $(".price").css({"border":"1px solid red"})
                        return;
                    }else{
                        $(".priceT").html("");
                        $(".price").css({"border":"1px solid black"})
                    }
                    if(city == "--选择城市--"){
                        $(".cityT").html("城市不能为空");
                        $(".city").css({"border":"1px solid red"})
                        return;
                    }else{
                        $(".cityT").html("");
                        $(".city").css({"border":"1px solid black"})
                    }
                    //获得id
                    var t_id = $scope.goods[$scope.goods.length-1].id;
                    t_id ++;
                    //获得时间
                    var t = new Date();
                    var time = t.getTime();
                    var newgood = {
                        
                        "id":t_id,
                        "isChecked":false,
                        "gname":gname,
                        "uname":uname,
                        "shoujihao":shoujihao,
                        "price":price,
                        "city":city,
                        "time":time,
                        "zhuangtai":false
                    }
                    
                    arr.push(newgood);
                    $scope.goods = arr;
                    $scope.xs = false;
                    
                }
                
                //添加结束
                $scope.fahuo = function($index){
                    arr[$index].zhuangtai = true;
                    $scope.goods = arr;
                }
                //根据商品名查询
                $scope.gnamecha = function($event){
                    var k = $event.keyCode;
                    var newood = [];
                    if(k == 13){
                        
                        var gn = $scope.gcha;
                        
                        for(var i = 0; i<arr.length;i++){
                            var a = arr[i];
                            
                            if(a.gname.indexOf(gn)>=0){
                                newood.push(a);
                            }
                        }
                        
                        $scope.goods = newood;
                    }
                }
                
                
                //根具手机号查询
                $scope.shoujihaocha = function($event){
                    var k = $event.keyCode;
                    var newood = [];
                    if(k == 13){
                        
                        var gn = $scope.scha;
                        
                        for(var i = 0; i<arr.length;i++){
                            var a = arr[i];
                            
                            if(a.shoujihao.indexOf(gn)>=0){
                                newood.push(a);
                            }
                        }
                        
                        $scope.goods = newood;
                    }
                }
                
                
                //根具状态查询
                $scope.zhuangtaicha = function(){
                    var z = $scope.zcha;
                    var ngood = [];
                    if(z=="已发货"){
                        
                        for(var i = 0 ;i<arr.length;i++){
                            var b = arr[i].zhuangtai;
                            if(b){
                                ngood.push(arr[i]);
                            }
                        }
                        
                    }else{
                        for(var i = 0 ;i<arr.length;i++){
                            var b = arr[i].zhuangtai;
                            if(b==false){
                                ngood.push(arr[i]);
                            }
                        }
                    }
                    
                    $scope.goods = ngood;
                }
                $scope.dianji = function($index){
                    
                    arr[$index].isChecked =! arr[$index].isChecked;
                    
                }
                //批量删除
                $scope.deles = function(){
                    for(var i = 0 ;i<arr.length;i++){
                        var g = arr[i];
                        var f = g.isChecked;
                        var h = g.zhuangtai;
                        
                        if(f == true && h == true){
                            arr.splice(i,1);
                        }
                    }
                    $scope.goods = arr;
                    
                }
                //id排序             
                var idflag = true;
                $scope.idpai = function(){
                    
                    if(idflag){
                        
                        arr.sort(function(a,b){
                        return a.id - b.id;
                    })
                    }else{
                        arr.sort(function(a,b){
                        return b.id - a.id;
                    })
                    }
                    idflag =! idflag;
                    $scope.goods = arr;
                }
                
                
                //价格排序             
                var priceflag = true;
                $scope.pricepai = function(){
                    alert("safs")
                    if(priceflag){
                        
                        arr.sort(function(a,b){
                        return a.price - b.price;
                    })
                    }else{
                        arr.sort(function(a,b){
                        return b.price - a.price;
                    })
                    }
                    priceflag =! priceflag;
                    $scope.goods = arr;
                }
                
                //时间排序             
                var timeflag = true;
                $scope.timepai = function(){
                    
                    if(timeflag){
                        
                        arr.sort(function(a,b){
                        return a.time - b.time;
                    })
                    }else{
                        arr.sort(function(a,b){
                        return b.time - a.time;
                    })
                    }
                    timeflag =! timeflag;
                    $scope.goods = arr;
                }
                
                
            })
            //过滤器状态
            m.filter("myfilter",function(){
                return function(input){
                    if(input){
                        return "已发货";
                    }else{
                        return "未发货";
                    }
                    return input;
                }
            })
        </script>
    </body>

</html>
Gybk123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular练习题
weixin_33962923的博客
02-18 973
1、ng-bind 与{{}}有区别吗？B A、有区别，在我们载入数据的时候ng-bind会出现一瞬间的乱码 B、有区别，在我们载入数据的时候{{}}会出现一瞬间的乱码 C、没有什么区别，都可以将我们获取的数据分配到页面上 2、【多选】以下说法正确的是AB A、angular.toJson()将对象转成字符串 B、Angular.fromJson()将字符串转成对象 C、ang...
Angular基础实战练习
sinat_38930182的博客
07-24 1428
基础实战练习包括： 动态组件、路由 、 组件之间的交互、 DI实战、HttpClient 、 使用已发布的库、 反向代理、CLI命令
angular小项目练习
04-12
angular小项目练习，简单易学，根据别的项目改写的比较简单。
angularJS 购物车练习
xuanwuziyou的专栏
10-12 1314
本文是一个简单的购物车练习，功能包括增加、减少某商品的数量，从而影响该商品的购买总价以及所有商品的购买总价；从购物车内移除一项商品；清空购物车。 页面效果如图：     若使用js或jquery来实现这个页面，会需要绑定很多事件，如减少数量按钮事件，增加数量按钮事件，移除某项商品事件，清空购物车事件，而这些事件之中很多代码很重复，比如计算某项商品的总购买价，计算所有商品的购买总价，不胜
angular综合练习题
01-11
angular学习不错的练习例子，希望对大家有帮助。来自慕课网。
Angular:练习角度
04-10
克隆码Chay cmd“ npm安装”Chay cmd“ npm start”或“ ng serve”
Angular:角度练习
03-10
我的应用程式该项目是使用版本11.2.2生成的。开发服务器为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载...进一步的帮助要获得有关Angular CLI的更多帮助，请使用ng help或查看“ 页面。
Angular路由简单学习
08-31
主要和大家一起学习Angular路由，介绍angular的$route的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angular简单练习之记录添加、删除
qq_31207499的博客
08-04 463
       利用angular实现简单的记录添加删除功能，删除记录有两种思路，一种是直接遍历记录数组，并对数组中的每一个对象进行判断，如果被选中则删除，但是这种方式需要注意的是，当有两个连续选中的记录是，后面的选中的记录会被漏掉，因为删除数组的时候，删除对象后面的每一个对象对应下标都会减1，而遍历的顺序是接着删除对象的下标继续往后遍历，因此会漏掉删除对象后面的一个对象，解决方法就是，再删除操作后...
angular练习
yin_chenglong的博客
05-03 210
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; ul, li{display:block; position:relative;}   li{float:left; margin:auto 6px; list-st
angularjs小练习
qq_42818575的博客
07-29 225
&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;十二课技能练习&lt;/title&gt; &lt;script src="js/angular.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/s
angular 基础练习
weixin_30565199的博客
05-12 78
<!DOCTYPE HTML> <html> <head> <title> 测试页 </title> <meta charset="utf-8"> </head> <body ng-app="myApp"> <div ng-controller=...
关于node、angular的一个练手项目
qq_42769197的博客
11-08 411
这是完成的效果 ，可以创建内容 并且传到后台 在localhost：3000端口 这是index.html的内容 &lt;!--write by sevencute 2018-11-8--&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en" ng-app="App"&gt; &lt;head&gt; &lt;meta charset="U
angular轮播图
weixin_30652491的博客
03-25 555
还是直接上代码比较好 <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/animate....
Angular练习购物车实现篇
qq_45866386的博客
08-16 309
最近在学习Angular时遇见的一些小问题： 先说购物车实现：具体项目查看：https://angular.cn/start/start-data#display-the-cart-items 首先时service: 随后时cart的层： .ts html 之前出现了一个小问题报了错误怎么找没找到图像想起配置的问题 这三项一个都不能少之前少配置了最下边的declarations声明所以找不到对应的组件 然后说一个之前的小问题刚开始时创建一个对象时候系统会给我们一个...
angularJS 练习
Cloud 专栏
02-17 566
第一次，学习 angular JS 。
angular小练习之我的笔记
qq_31207499的博客
08-04 211
angular小练习，实现简单的笔记保存、读取和删除，并同步剩余字数，其中涉及到了数据存储方面的知识； html5页面很简单，就是一个文本框，加上三个button分别是保存、读取和删除； html代码： &lt;body ng-app="myApp" ng-controller="NoteCtrl"&gt; &lt;h2&gt;我的学习笔记&lt;/h2&gt; &lt;text...
angular知识点及练习
qq_41166157的博客
02-01 220
-----------《angular入门笔记--知识点》-------------------------------------------------------- anglarjs 动态数据绑定： AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。 {{ firstName }} 是通过 ng-model="firstName"
angular学习路线
最新发布
06-09
学习 Angular 的路线可以大致分为以下几个阶段： 1. HTML、CSS 和 JavaScript...总之，学习 Angular 需要长期的投入和练习。通过不断的实践和学习，你可以逐渐掌握 Angular 的技能，并成为一名优秀的 Angular 开发者。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值