angularjs小练习

最新推荐文章于 2019-07-24 11:33:20 发布

拥抱大树

最新推荐文章于 2019-07-24 11:33:20 发布

阅读量225

点赞数

分类专栏： UI日常练习文章标签：私人

本文链接：https://blog.csdn.net/qq_42818575/article/details/81275199

版权

UI日常练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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


</head>
<body ng-app="myapp" ng-controller="myctrl" >

    <input type="text" id="" value="" ng-model="key"/>
    <select name="" ng-model="byprice">
        <option value="gprice">单价正序</option>
        <option value="-gprice">单价倒序</option>
    </select>

    <table border="1" cellspacing="0" cellpadding="5">
        <tr>
            <th>行引值</th>
            <th>商品名</th>
            <th>商品数量</th>
            <th>商品单价</th>
            <th>商品总价</th>
            <th>删除</th>
        </tr>

        <tr ng-repeat="x in shops|filter:key|orderBy:byprice">
            <td>{{$index}}</td>
            <td>{{x.gname}}</td>
            <td>
                <input type="number" value="{{x.gnum}}" ng-model="x.gnum" ng-click="delbynum(x.gid)" />
            </td>
            <td>{{x.gprice|currency:"￥："}}</td>
            <td>{{x.gcount*x.gnum|currency:"￥："}}</td>
            <td><input type="button" id="" value="珊除" ng-click="del(x.gid)"/></td>
        </tr>

    </table>
    <input type="button" value="清空购物车" ng-click="clear()" />
    <script type="text/javascript">

        var app=angular.module("myapp",[]);
        app.controller("myctrl",function($scope,$http){

            $scope.shops = [{
                "gid": 001,
                "gname":"手机",
                "gnum": 3,
                "gprice": 1000,
                "gcount": 3000
            }, {
                "gid": 002,
                "gname": "电脑",
                "gnum": 3,
                "gprice": 2000,
                "gcount": 6000
            }, {
                "gid": 003,
                "gname": "电视",
                "gnum": 6,
                "gprice": 500,
                "gcount": 3000
            }];

            //初始化排序值
            $scope.byprice = "gprice";


            //定义删除的方法
            $scope.del = function(id){
                for(var i=0;i<$scope.shops.length;i++) {
                    if ($scope.shops[i].gid==id) {
                        $scope.shops.splice(i,1);
                        break;
                    }//判断对应的id
                }//for循环

            }

            $scope.delbynum = function(id){
                for (var i=0;i<$scope.shops.length;i++) {
                    if ($scope.shops[i].gid==id) {
                        if ($scope.shops[i].gnum==0) {
                            $scope.shops.splice(i,1);
                            break;

                        }//判断在数量等于0后删除
                    }//确认那一条数据
                }//for循环

            }

            //清空数据
            $scope.clear = function(){
                $scope.shops=[];
            }

        });
    </script>

</body>

拥抱大树

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs小练习

&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
复制链接

扫一扫