您的位置：首页 > 其它

商品列表搜索查询

2017-10-14 11:45 330 查看

<!DOCTYPE html>

<html>

   <head>

       <meta charset="UTF-8">

       <title>商品列表搜索查询</title>

       <script type="text/javascript" src="../AngularJS/angular.js" ></script>

       <script>

           var app = angular.module("myApp",[]);

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

               $scope.products = [{

                   id:80,

                   name:"iphone",

                   price:5400

               },{

                   id:150,

                   name:"ipad mini",

                   price:2200

               },{

                   id:120,

                   name:"ipad air",

                   price:2340

               },{

                   id:160,

                   name:"ipad",

                   price:1420

               },{

                   id:130,

                   name:"imac",

                   price:15400

               }];



               $scope.sortFlag = "-";

               $scope.sortName = "name";

               //定义排序功能

               $scope.sortProducts = function(clomnName){

                   $scope.sortName = clomnName;

                   if($scope.sortFlag == "-"){

                       $scope.sortFlag = "";

                   }else{

                       $scope.sortFlag = "-";

                   }

               }



               //删除指定商品

               $scope.deleteProduct = function(name){

                   //alert(name);

                   //var i = -1;

                   for(index in $scope.products){

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

                           //i = index;

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

                       }

                   }

               }

               //全部删除

               $scope.deleteAll = function(){

                   $scope.products = null;

               }

           });

       </script>

   </head>

   <body ng-app="myApp" ng-controller="myCtrl">

       <center>

           <h3>商品列表</h3>

           <input type="text" ng-model="serach" placeholder="产品名称" />

           <button ng-click="deleteAll()">全部删除</button><br/><br/>

           <table border="1 solde" cellspacing="0" cellpadding="10">

               <thead>

                   <tr>

                       <th ng-click="sortProducts('id')">产品编号</th>

                       <th ng-click="sortProducts('name')">产品名称</th>

                       <th ng-click="sortProducts('price')">产品价格</th>

                       <th>功能</th>

                   </tr>

               </thead>

               <tbody>

                   <tr ng-repeat="goods in products | filter:serach | orderBy:(sortFlag+sortName)">

                       <td>{{goods.id}}</td>

                       <td>{{goods.name}}</td>

                       <td>{{goods.price}}</td>

                       <td><button ng-click="deleteProduct(goods.name)">删除</button></td>

                   </tr>

               </tbody>

           </table>

       </center>

   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航