angular增删改查_angular.js增删改查sqlserver数据库-CSDN博客

本文链接：https://blog.csdn.net/Guiyide/article/details/79068006

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>

           table tr:nth-child(odd){
               background-color: darkkhaki;
           }

       </style>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
           var app = angular.module("myapp",[]);
           app.controller("mycontr",function($scope){
               //准备初始数据
               $scope.check;
               $scope.zongji;
               $scope.xianyin = false;
               $scope.name1="";
               $scope.num1="";
               $scope.address1="";
               $scope.price1="";
               $scope.date1="";
               $scope.checkbox1;

               var date1 = new Date("2017-9-01 10:10:10");
               var date2 = new Date("2017-1-02 10:10:10");
               var date3 = new Date("2017-1-03 10:10:10");
               $scope.goods = [{
                   name:"云南白药",
                   num:100,
                   address:"云南",
                   price:19.9,
                   tufa:false,
                   date:date1
               },{
                   name:"999感冒灵",
                   num:30,
                   address:"北京",
                   price:12.5,
                   tufa:false,
                   date:date2
               },{
                   name:"感康",
                   num:20,
                   address:"河北",
                   price:16.6,
                   tufa:false,
                   date:date3
               }];

               $scope.shanchu = function($index){
                   if(window.confirm("确定要删除吗？")){
                       $scope.goods.splice($index,1);
                       alert("用户删除成功！");
                   }else{
                       alert("用户删除失败！");
                   }
               }

               $scope.getxiugai = function($index){
                   $scope.xiabiao=$index;
                   $scope.xianyin = !$scope.xianyin;
               }

               $scope.gai = function(){
                   $index=   $scope.xiabiao;
                   $scope.goods[$index].name=$scope.name1;
                   $scope.goods[$index].address=$scope.address1;
                   $scope.goods[$index].price=$scope.price1;
                   $scope.goods[$index].num=$scope.num1;


                   $scope.xianyin = !$scope.xianyin;
               }


               $scope.getallprice = function(){
                   var count = 0;
                   for(index in $scope.goods){//遍历goods，得到索引
                       count += $scope.goods[index].price*$scope.goods[index].num;
                   }
                   return count;
               }
               $scope.getshuliang = function(){
                   var numcount = 0;
                   for (ii in $scope.goods) {
                       numcount += $scope.goods[ii].num;
                   }
                   return numcount;
               }

               $scope.tianjia = function($index){
                   var goo ={
                       name:$scope.name1,
                       num:$scope.num1,
                       address:$scope.address1,
                       price:$scope.price1,
                       date:new Date()
                   };
                   $scope.goods.push(goo);
                   $scope.xianyin = !$scope.xianyin;
               }

               $scope.piliangshan = function(){

                   for (var i = 0; i < $scope.goods.length; i++) {
                       if ($scope.goods[i].tufa) {
                           $scope.goods.splice(i,1);
                           i--;
                       }
                   }
               }
               $scope.jinhuo = function(){
                   $scope.xianyin = !$scope.xianyin;
               }
               $scope.qingkong = function(){
                   for (var i = 0; i < $scope.goods.length-1; i++) {
                           $scope.goods.splice(i);
                   }
               }
               $scope.quanxuan = function(){
                   for (var i = 0; i < $scope.goods.length; i++) {
                           $scope.goods[i].tufa = $scope.check;
                   }
               }

           });

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

       <center>
           <h3>商品数据</h3>
           <br />
               <input type="text" placeholder="请输入price关键字" ng-model="chaprice" />
               <input type="text" placeholder="请输入name关键字" ng-model="chaname" />
               <input type="button" value="批量删除" ng-click="piliangshan()" />
               <input type="button" value="清空商品" ng-click="qingkong()" />
               <input type="button" value="进货" ng-click="jinhuo()" />
               <select ng-model="paishuju">
                   <option value="">
                       排序
                   </option>
                   <option value="price">
                       按价格正序
                   </option>
                   <option value="-price">
                       按价格到序
                   </option>
                   <option value="num">
                       按数量正序
                   </option>
                   <option value="-num">
                       按数量到序
                   </option>
                   <option value="date">
                       按时间正序
                   </option>
                   <option value="-date">
                       按时间到序
                   </option>
               </select>
           <br />
           <table width="700px" border="1px" cellpadding="0px" cellspacing="0px">
               <tr align="center" style="background-color: darkgrey;">
                   <td>
                       <input type="checkbox" ng-model="check" ng-click="quanxuan()" />
                   </td>
                   <td>序号</td>
                   <td>名字</td>
                   <td>价钱</td>
                   <td>数量</td>
                   <td>日期</td>
                   <td>小计</td>
                   <td>操作</td>
               </tr>
               <tr align="center" ng-repeat="g in goods | orderBy:paishuju | filter:{name:chaname,price:chaprice}">
                   <td><input type="checkbox" ng-model="g.tufa" /></td>
                   <td>{{$index}}</td>
                   <td>{{g.name}}</td>
                   <td>{{g.price}}</td>
                   <td>{{g.num}}</td>
                   <td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
                   <td>{{g.num*g.price | number:2}}</td>
                   <td><input type="button" value="删除" ng-click="shanchu($index);getallprice()" />   
                       <input type="button" value="修改" ng-click="getxiugai($index);getallprice()" /></td>
               </tr>
           </table>
           总计：<span ng-bind="getallprice()"></span>
           总数量：<span ng-bind="getshuliang()"></span>
           <p ng-show="xianyin">
               <input type="number" placeholder="请输入price" ng-model="price1" /><br />
               <input type="text" placeholder="请输入name" ng-model="name1" /><br />
               <input type="number" placeholder="请输入num" ng-model="num1" /><br />
               <input type="text" placeholder="请输入address" ng-model="address1" /><br />
               <input type="button" value="添加" ng-click="tianjia($index)" />
               <input type="button" value="该" ng-click="gai()" ng-model="xiabiao"/>
           </p>

       </center>


   </body>
</html>