angular 总练习

最新推荐文章于 2024-06-12 11:24:43 发布
最新推荐文章于 2024-06-12 11:24:43 发布
阅读量283 收藏
点赞数
版权声明：本文为博主原创文章，遵循 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
关注
Angular练习题
weixin_33962923的博客
02-18 1018
1、ng-bind 与{{}}有区别吗？B A、有区别，在我们载入数据的时候ng-bind会出现一瞬间的乱码 B、有区别，在我们载入数据的时候{{}}会出现一瞬间的乱码 C、没有什么区别，都可以将我们获取的数据分配到页面上 2、【多选】以下说法正确的是AB A、angular.toJson()将对象转成字符串 B、Angular.fromJson()将字符串转成对象 C、ang...
angular小项目练习
04-12
angular小项目练习，简单易学，根据别的项目改写的比较简单。
angular练习
yin_chenglong的博客
05-03 241
&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 264
&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基础实战练习
sinat_38930182的博客
07-24 1483
基础实战练习包括： 动态组件、路由 、 组件之间的交互、 DI实战、HttpClient 、 使用已发布的库、 反向代理、CLI命令
angular综合练习题
01-11
这个"angular综合练习题"资源显然是为了帮助用户深化对Angular的理解并提升实践技能。Angular以其强大的数据绑定和依赖注入特性而闻名，使得前端开发更为高效。 1. **数据绑定**：Angular的核心特性之一就是双向...
MoneyFlow:基于 Web 的个人财务应用程序，使用 angular 构建。 这只是客户端，只是 Angular 的练习
07-03
**MoneyFlow：基于Web的个人财务应用程序** MoneyFlow是一个基于Web的...总的来说，MoneyFlow是一个很好的Angular实践项目，无论是对初学者还是有经验的开发者来说，都能从中学习到Web应用开发的重要技术和最佳实践。
APTRC:与Angular一起练习
05-22
测试应用 该项目是使用版本11.0.1生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载。...要获得有关Angular CLI的更多帮助，请使用ng help或查看“ 页面。
angular-example:帮助教授 Angular 的简单练习
06-26
一个示例 Angular 应用程序。 指示 首先，安装节点。 brew install node 将此存储库克隆到您的项目目录中。 git clone git@github.com:rjungemann/angular-example.git cd angular-example 获取所有必要的依赖项...
angularJS 练习
Cloud 专栏
02-17 590
第一次，学习 angular JS 。
angular 基础练习
weixin_30565199的博客
05-12 90
<!DOCTYPE HTML> <html> <head> <title> 测试页 </title> <meta charset="utf-8"> </head> <body ng-app="myApp"> <div ng-controller=...
angular知识点及练习
qq_41166157的博客
02-01 266
-----------《angular入门笔记--知识点》-------------------------------------------------------- anglarjs 动态数据绑定： AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。 {{ firstName }} 是通过 ng-model="firstName"
angularJS 购物车练习
xuanwuziyou的专栏
10-12 1365
本文是一个简单的购物车练习，功能包括增加、减少某商品的数量，从而影响该商品的购买总价以及所有商品的购买总价；从购物车内移除一项商品；清空购物车。 页面效果如图：     若使用js或jquery来实现这个页面，会需要绑定很多事件，如减少数量按钮事件，增加数量按钮事件，移除某项商品事件，清空购物车事件，而这些事件之中很多代码很重复，比如计算某项商品的总购买价，计算所有商品的购买总价，不胜
angular简单练习之记录添加、删除
qq_31207499的博客
08-04 492
       利用angular实现简单的记录添加删除功能，删除记录有两种思路，一种是直接遍历记录数组，并对数组中的每一个对象进行判断，如果被选中则删除，但是这种方式需要注意的是，当有两个连续选中的记录是，后面的选中的记录会被漏掉，因为删除数组的时候，删除对象后面的每一个对象对应下标都会减1，而遍历的顺序是接着删除对象的下标继续往后遍历，因此会漏掉删除对象后面的一个对象，解决方法就是，再删除操作后...
angular小练习之我的笔记
qq_31207499的博客
08-04 256
angular小练习，实现简单的笔记保存、读取和删除，并同步剩余字数，其中涉及到了数据存储方面的知识； html5页面很简单，就是一个文本框，加上三个button分别是保存、读取和删除； html代码： &lt;body ng-app="myApp" ng-controller="NoteCtrl"&gt; &lt;h2&gt;我的学习笔记&lt;/h2&gt; &lt;text...
60道Angular高频题整理(附答案背诵版)
最新发布
IT6666_it的博客
06-12 1115
除了使用内置过滤器外，AngularJS 也允许创建自定义过滤器。自定义过滤器可以通过.filter方法定义，该方法接受一个过滤器名称和一个工厂函数，工厂函数返回一个过滤函数。过滤函数接受输入数据，并返回转换后的输出。// 处理输入数据，返回转换后的输出});在模板中使用自定义过滤器：
关于node、angular的一个练手项目
qq_42769197的博客
11-08 441
这是完成的效果 ，可以创建内容 并且传到后台 在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练习购物车实现篇
qq_45866386的博客
08-16 354
最近在学习Angular时遇见的一些小问题： 先说购物车实现：具体项目查看：https://angular.cn/start/start-data#display-the-cart-items 首先时service: 随后时cart的层： .ts html 之前出现了一个小问题报了错误怎么找没找到图像想起配置的问题 这三项一个都不能少之前少配置了最下边的declarations声明所以找不到对应的组件 然后说一个之前的小问题刚开始时创建一个对象时候系统会给我们一个...
Angular实战练习：综合书籍与网站资源
此外，由于这个项目是Angular练习，开发者还需要了解如何搭建Angular开发环境。这包括安装Node.js和npm（Node.js的包管理器），通过npm安装Angular CLI（命令行界面），并使用Angular CLI创建、构建和管理Angular...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值