模糊查询和排序

来源：互联网发布：python mat函数编辑：程序博客网时间：2024/06/05 15:18

<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<style type="text/css">
  #big{
   margin: auto;
   margin-top: 80px;
   width: 750px;
   height: 400px;
  }
  #nav{
   width: 700px;
   height: 40px;
   background-color: #F8F8F8;
   border-bottom: 1px solid #D9D9D9;
  }
  #like{
   display: inline-block;
   width: 160px;
   height: 20px;
   margin-left:50px;
   margin-top: 8px;
   margin-right:50px;
  }
  #main{
   width: 750px;
   height: 360px;

  }
  span{padding-left:50px;padding-right:80px;
  }
  button{
   border: none;
   background: none;
  }

  table th{
   border-bottom: 2px solid #D9D9D9;
   text-align: left;
  }
  table tbody tr{
   border-bottom: 2px solid #D9D9D9;
  }
</style>
<script src="js/angular.js"></script>
<script type="text/javascript">
  var app=angular.module("myApp",[]);
  app.controller("myCtrl",function($scope){
   $scope.phone=[
   { id:910,name:"imac",price:15400 },
            { id:80,name:"iphone",price:5400 },
            { id:29,name:"ipad",price:1420 },
            { id:500,name:"ipad air",price:2340 },
            { id:1200,name:"ipad mini",price:2200 }
   ];
   $scope.delete=function(index){
    confirm('是否删除'+$scope.phone[index].name);
    $scope.phone.splice(index,1);
   };
   $scope.removeAll=function(){
    $scope.phone=[];
   };

   $scope.orderColumn='name'; //排序字段
       $scope.orderSign='-';      //为空时正序为负号时倒序

        $scope.sortProduct=function(sortColumn){ //点击列标题排序事件
            $scope.orderColumn=sortColumn;
            if($scope.orderSign=="-"){
                $scope.orderSign="";
            }else{
                $scope.orderSign='-';
            }
        };
  });
</script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div id="big">
   <div id="nav">
    <input id="like" type="text" placeholder="商品名称" ng-model="search" />
    <button ng-click="removeAll()">全部删除</button>
   </div>
   <div id="main">
      <table class="table" cellpadding="10px" >
           <thead>
           <tr>
               <th ng-click="sortProduct('id')">
                     产品编号
                 <span></span>
               </th>
               <th ng-click="sortProduct('name')">
                     产品名称
                   <span></span>
               </th>
               <th ng-click="sortProduct('price')">
                     产品价格
                 <span></span>
               </th>
               <th>删除</th>
           </tr>
           </thead>
        <tbody>
        <tr ng-repeat="x in phone| filter:{'name':search} | orderBy:(orderSign + orderColumn) " >
            <td>
                {{x.id}}
            </td>
            <td>
                {{x.name}}
            </td>
            <td>
                {{x.price | currency:'(RMB)'}}
            </td>
            <td><button ng-click="delete($index)">删除</button></td>
        </tr>
        </tbody>
    </table>
   </div>
  </div>
</body>
</html>

阅读全文

0 0