练习题(查,删,排,改)

最新推荐文章于 2022-11-03 23:21:28 发布
YHMQ66
最新推荐文章于 2022-11-03 23:21:28 发布
阅读量313
点赞数 1
分类专栏： H5 文章标签： angularjs
本文链接：https://blog.csdn.net/YHMQ66/article/details/78578487
版权
H5 专栏收录该内容
9 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../Anglert/angular.min.js" ></script>
        <script>
            var app=angular.module("Myapp",[]);


        var goods=[{"id":165,"name":"dfddf","price":5414,"done":false},
                {"id":455,"name":"fddh","price":2123,"done":false},
                {"id":184,"name":"ghgh","price":7415,"done":false},
                {"id":191,"name":"cvcd","price":9999,"done":false}];

            app.controller("Myctrl",function($scope){

                 $scope.gds=goods;


                //批量删除
                $scope.delall=function(){
                    var goodNames=[];

                    for(index in $scope.gds){

                        if($scope.gds[index].done==true){
                            goodNames.push($scope.gds[index].name);
                        }
                    }

                    if(goodNames.length>0)
                    {

                        if(confirm("是否删除选中项")){

                            for(i in goodNames)
                            {
                                var names=goodNames[i];

                                for(i2 in $scope.gds)
                                {

                                    if($scope.gds[i2].name==names)
                                    {

                                    $scope.gds.splice(i2,1);   

                                    }

                                }


                            }


                        }


                    }else{
                        alert("请删除选项");

                    }




                }




                //单独删除
                $scope.delone=function(names){


                    if(confirm("确定删除吗")){

                     for(index in $scope.gds)
                     {

                         if(names==$scope.gds[index].name){

                            $scope.gds.splice(index,1);

                         }

                     }



                    }

                }




                $scope.fuhao="";
                $scope.shuxing="";
                $scope.zfpai=function(sx){
                    $scope.shuxing=sx;
                    if($scope.fuhao=="")
                    {

                        $scope.fuhao="-";

                    }else{

                        $scope.fuhao="";

                    }
                }



                //全选
                $scope.checkall=function(){

                    if($scope.cheall==true){

                        for(var  i=0;i<$scope.gds.length;i++){
                            $scope.gds[i].done=true;
                        }
                    }else{
                        for(var  i=0;i<$scope.gds.length;i++){

                            $scope.gds[i].done=false;
                             }
                    }



                }


                //修改
                $scope.xiugai = function(price) {
                    //获得价格
                    for(index in $scope.gds) {

                        if(price == $scope.gds[index].price) {
                            var  tan=window.prompt("清输入要修改的价格", price)


                          if(!tan=="NaN" ||!tan==""){
                            var result = parseInt(tan);
                            //在这之前对result的结果进行非字符串判断
                            if(result < 0) {
                                alert("输入有误，请重新更改");
                            } else {


                                if(window.confirm("确定要将" + $scope.gds[index].name + "的价格更改为：" + result + "吗？")) {
                                    $scope.gds[index].price = result;
                                }




                            }

                     }

                        } 
                    }
                }













                //下拉菜单筛选
                $scope.xuzhe="-请选择-";
                $scope.fun=function(priced){


                    if($scope.xuzhe=="-请选择-"){

                        return true;

                    }else{

                        var arr=$scope.xuzhe.split("-");
                        var pricemin=arr[0];
                        var pricemax=arr[1];

                        //alert(pricemin);
                        //alert(pricemax);
                        if(priced>pricemax||priced<pricemin){

                            return false;

                        }else{

                            return true;
                        }

                        }
                     }



                //定义下拉菜单排序规则
                $scope.selOrder;
                $scope.orderSel=function(){
                    if($scope.selOrder == "id") {
                        $scope.fuhao = "";
                        $scope.shuxing = "id";
                    } else if($scope.selOrder == "-id") {
                        $scope.fuhao = "-";
                        $scope.shuxing = "id";
                    } else if($scope.selOrder == "price") {
                        $scope.fuhao = "";
                        $scope.shuxing = "price";
                    } else if($scope.selOrder == "-price") {
                        $scope.fuhao = "-";
                        $scope.shuxing = "price";
                    };



            }



                //反选
                $scope.checkselectall=function(){

                    var  flag=false;
                    for(index in $scope.gds)
                    {


                        if(!$scope.gds[index].done){

                            flag=true;

                        }



                    }



                    if(flag)
                    {

                    $scope.cheall=false;


                   }else{


                        $scope.cheall=true;

                   }








                }






            });





        </script>
    </head>
    <body ng-app="Myapp" ng-controller="Myctrl">
        <center>
            <input type="text" placeholder="请输入关键字" ng-model="gjz" />
            <select ng-model="xuzhe" >
                <option>-请选择-</option>
                <option>1000-2000</option>
                <option>2000-4000</option>
                <option>4000-6000</option>
                <option>7000-10000</option>
                <option>10000-12000</option>
            </select>
            正反排序<select ng-model="selOrder" ng-change="orderSel()">
                <option value="">排序方式</option>
                <option value="id">id正序</option>
                <option value="-id">id逆序</option>
                <option value="price">价格正序</option>
                <option value="-price">价格逆序</option>

            </select>
            <button ng-click="delall()">批量删除</button>

            <br /><br />




            <table border="1px solid blue"   cellpadding="10px" cellspacing="0px">
                <thead>
                    <tr>
                        <td><input type="checkbox" ng-click="checkall()" ng-model="cheall"/></td>
                        <td ng-click="zfpai('id')">编号</td>
                        <td ng-click="zfpai('name')">名称</td>
                        <td ng-click="zfpai('price')">价格</td>
                        <td>操作</td>
                    </tr>




                </thead>



                <tbody>
                <tr ng-repeat="good in gds|filter:{'name':gjz}|orderBy:(fuhao+shuxing)"  ng-if="fun(good.price)" >
                    <td><input type="checkbox" ng-model="good.done" ng-click="checkselectall()"/></td>
                    <td>{{good.id}}</td>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td><button ng-click="delone(good.name)">删除</button><button ng-click="xiugai(good.price)">修改</button></td>

                </tr>
                </tbody>



            </table>



        </center>
        </body>
</html>
这里写图片描述
YHMQ66
关注
1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习题(查,删,排,改)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../Anglert/angular.min.js" ></script> <script> v
复制链接

扫一扫
专栏目录