Angular包含的各种操作

最新推荐文章于 2019-11-12 16:40:43 发布

Gybk123

最新推荐文章于 2019-11-12 16:40:43 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/Gybk123/article/details/78601237

版权

<!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: 600px;
               background-color: greenyellow;
           }

           #chaxun {
               margin-left: 170px;
               margin-top: 15px;
               width: 150px;
               height: 35px;
               border-radius: 10px;
           }

           #chaxun:hover {
               background-color: goldenrod;
           }

           #xun {
               width: 50px;
               height: 35px;
               border-radius: 10px;
               background-color: darkorange;
           }

           #xun:hover {
               background-color: aquamarine;
           }

           #tianjia {
               width: 100px;
               height: 35px;
               border-radius: 10px;
               background-color: green;
           }

           #tianjia:hover {
               background-color: red;
           }

           table {
               width: 460px;
               margin-top: 10px;
           }

           select {
               width: 150px;
               height: 35px;
               border-radius: 10px;
               background-color: sienna;
           }

           #f {
               margin-left: 200px;
               margin-top: 5px;
               width: 400px;
           }

           #f input {
               width: 300px;
           }

           #baocun {
               width: 100px;
               height: 35px;
               background-color: lightcoral;
               margin-left: 70px;
           }

           #baocun:hover {
               background-color: skyblue;
           }

           #foot {
               margin-left: 170px;
           }

           tr:nth-child(odd){background-color: blue;}
           tr:nth-child(even){background-color: green;}
           tr:nth-child(1){background-color: red;}
       </style>
   </head>

   <body>
       <div id="box" ng-app="myApp" ng-controller="myCtrl">
           <div id="header">
               <input type="text" id="chaxun" /><input type="button" value="查询" id="xun" ng-click="chaxun()" />
               <input type="button" value="添加" id="tianjia" ng-click="add()" />
               <select ng-model="xuanxiang" id="xuanxiang" ng-options="x for x in names" ng-init="xuanxiang=names[0]" ng-change="xuan()">

               </select>
           </div>
           <table border="1px" cellspacing="0" cellpadding="0">

               <tr>
                   <td><input type="checkbox" id="checkbox" ng-click="checkbox()"></td>
                   <td>商品名称</td>
                   <td>种类</td>
                   <td>单价</td>
                   <td>数量</td>
                   <td>操作</td>
               </tr>
               <tr ng-repeat="good in goods">
                   <td><input type="checkbox" id="check"></td>
                   <td>{{good.name}}</td>
                   <td>{{good.type}}</td>
                   <td>{{good.price|currency:"￥:"}}</td>
                   <td>{{good.count}}</td>
                   <td><a href="#" ng-click="dele($index)">删除</a></td>
               </tr>
           </table>
           <div id="foot">
               <input type="button" value="批量删除" ng-click="deles()" /><input type="button" value="反选" ng-click="fanxuan()"/>
           </div>

           <form id="f">
               商品名称:<input type="text" id="name" /><br /> 商品种类:
               <input type="text" id="type" /><br /> 商品单价:
               <input type="text" id="price" /><br /> 商品数量:
               <input type="text" id="count" /><br />

               <input type="button" id="baocun" value="保存" ng-click="baocun()" />
           </form>

       </div>
       <script type="text/javascript">
           var m = angular.module("myApp", []);
           m.controller("myCtrl", function($scope) {
               $scope.names = ["根据单价正序", "根据单价倒序"];
               //开始添加框隐藏
               $("#f").hide();
               //创建数组
               $scope.goods = [{
                   "name": "西瓜",
                   "type": "水果",
                   "price": 2,
                   "count": 10
               }, {
                   "name": "辣椒",
                   "type": "蔬菜",
                   "price": 4,
                   "count": 6
               }, {
                   "name": "猪",
                   "type": "动物",
                   "price": 5,
                   "count": 1
               }];
               //添加操作

               $scope.add = function() {
                       $("#f").show();
                       //点击保存
                       $scope.baocun = function() {
                           //获得输入框的值
                           var name = $("#name").val();
                           var type = $("#type").val();
                           var price = $("#price").val();
                           var count = $("#count").val();
                           //创建一个对象
                           var newGood = {
                               "name": name,
                               "type": type,
                               "price": price,
                               "count": count
                           };
                           //把对象添加到数组
                           $scope.goods.push(newGood);
                           $("#f").hide();
                       }

                   }
                   //查询
               $scope.chaxun = function() {

                       //获得输入框的内容
                       var chaName = $("#chaxun").val();

                       //创建一个数组
                       var newGoods = [];
                       for (var i = 0; i < $scope.goods.length; i++) {
                           var p = $scope.goods[i].name;

                           if (p.indexOf(chaName) >= 0) {

                               newGoods.push($scope.goods[i]);
                               //alert(newGoods)

                           }

                       }
                       $scope.goods = newGoods;
                   }
                   //排序
               $scope.xuan = function() {
                       var xz = $("#xuanxiang").val();
                       //                           alert(xz);
                       if (xz == "string:根据单价正序") {
                           $scope.goods.sort(function(a, b) {
                               if (a.price > b.price) {
                                   return 1;
                               } else if (a.price < b.price) {
                                   return -1;
                               }
                               return 0;
                           });
                       } else {
                           $scope.goods.sort(function(a, b) {
                               if (a.price > b.price) {
                                   return -1;
                               } else if (a.price < b.price) {
                                   return 1;
                               }
                               return 0;
                           });
                       }
                   }
                   //全选
               var flag = false;
               $scope.checkbox = function() {
                       var cbs = $("input[type=checkbox]");
                       if (flag == false) {
                           for (var i = 0; i < cbs.length; i++) {
                               var a = cbs[i];
                               a.checked = true;

                           }
                           flag = true;
                       } else {

                           for (var i = 0; i < cbs.length; i++) {
                               var a = cbs[i];
                               a.checked = false;

                           }
                           flag = false;

                       }

                   }
                   //删除

               $scope.dele = function($index) {

                       var c = confirm("是否确认删除？");
                       if (c == true) {

                           $scope.goods.splice($index, 1);
                       }

                   }
                   //批量删除
               $scope.deles = function() {
                   var d = $("input[type=checkbox][id=check]:checked");
                   if (d.length == 0) {
                       alert("请选择要删的内容");
                   } else {
                       for(var i = 0; i<d.length;i++){
                           var dd = d[i];
                           dd.parentNode.parentNode.remove();
                       }
                   }
               }

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

                   var f = $("input[type=checkbox][id=check]");

                   for(var i = 0 ; i < f.length;i ++){
                       var ff = f[i];

                       ff.checked = !ff.checked;
                   }
               }
           })
       </script>
   </body>

</html>