angularjs实现模糊查询添加程序

最新推荐文章于 2022-03-19 19:05:32 发布

眼角带笑_fxs

最新推荐文章于 2022-03-19 19:05:32 发布

阅读量989

点赞数

本文链接：https://blog.csdn.net/fxs_321/article/details/78610235

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>第三周周考</title>
  <script type="text/javascript" src="../angularjs/angular-route.js" ></script>
  <script type="text/javascript" src="../angularjs/angular.js" ></script>

  <style>

   table tr:nth-child(even){
    background-color:#7C7CC5;
   }
   table tr:nth-child(odd){
    background-color:#FFEB87;
   }
  </style>

  <script type="text/javascript">

  </script>
  <script type="text/javascript">
   var app=angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    var date=new Date();
    $scope.list=[
     {
      name:"云南白药",
      num:100,
      address:"云南",
      price:19.9,
      time:date
     },
     {
      name:"999感冒灵",
      num:30,
      address:"北京",
      price:12.5,
      time:date

     },
     {
      name:"感康",
      num:20,
      address:"河北",
      price:16.6,
      time:date
     }
    ];

    //实现删除的功能
    $scope.del=function(name){
     for(index in $scope.list){
      if(name==$scope.list[index].name){
       if(window.confirm("确定要删除用户吗？")){
        $scope.list.splice(index,1);
        alert("删除成功");
       }else{

       }
      }
     }
    };

    //按照要求进行排序
    $scope.bian;
    $scope.chan=function(){
     if($scope.bian=="num"){
      $scope.orderFlag="";
      $scope.orderLine="num";
     }else if($scope.bian=="-num"){
      $scope.orderFlag="-";
      $scope.orderLine="num";
     }else if($scope.bian=="time"){
      $scope.orderFlag="";
      $scope.orderLine="time";
     }else if($scope.bian=="-time"){
      $scope.orderFlag="-";
      $scope.orderLine="time";
     }
    };

$scope.isShow=false;
    $scope.btn=function(){
     if($scope.isShow){
      $scope.isShow=false;
     }else{
      $scope.isShow=true;
     }
    }

    //添加数据
    $scope.newname="";
    $scope.newnum="";
    $scope.newaddress="";
    $scope.newprice="";
    $scope.addList=function(){
     var lists={
      name:$scope.newname,
      num:parseInt($scope.newnum),
      address:$scope.newaddress,
      price:$scope.newprice,
      time:new Date()
     };
     $scope.list.push(lists);
    }
   });
  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  
  <center>
   <input type="text" placeholder="输入关键字搜索" ng-model="search" />

   <select ng-change="chan()" ng-model="bian">
    <option value="">--请选择--</option>
    <option value="num">按货物数量正序排列</option>
    <option value="-num">按货物数量逆序排列</option>
    <option value="time">按入库时间正序排列</option>
    <option value="-time">按入库时间逆序排列</option>
   </select>

   <button ng-click="btn()">入库</button>
   <br />
   <br />
   <table border="1px solid red" cellpadding="10" cellspacing="0" id="table1">
    <tr style="background-color:#CD9A5B;">
     <th>货物名称</th>
     <th>货物数量</th>
     <th>货物产地</th>
     <th>货物单价</th>
     <th>货物入库时间</th>
     <th>操作</th>
    </tr>
    <tr ng-repeat="l in list | filter:{name:search} | orderBy:(orderFlag+orderLine)" >
     <td>{{l.name}}</td>
     <td>{{l.num}}</td>
     <td>{{l.address}}</td>
     <td>{{l.price | currency:"¥:"}}</td>
     <td>{{l.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
     <td><button ng-click="del(l.name)">删除</button></td>
    </tr>
   </table>
   <br /><br />
   <div style="width: 300px;" ng-show="isShow">
    <h3>入库操作</h3>
    商品名称：<input type="text"placeholder="请输入商品名称" ng-model="newname"/><br/>
    商品数量：<input type="text"placeholder="请输入商品数量" ng-model="newnum"/><br/>
    商品产地：<input type="text"placeholder="请输入商品产地" ng-model="newaddress"/><br/>
    商品价格：<input type="text"placeholder="请输入商品价格" ng-model="newprice"/><br/>
    <button ng-click="addList()">添加</button>
   </div>
  </center>
</body>
</html>

眼角带笑_fxs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs实现模糊查询添加程序

第三周周考 table tr:nth-child(even){ background-color:#7C7CC5; } table tr:nth-child(odd){ background-color:#FFEB87; } var app=angu
复制链接

扫一扫