angular排序和删除

来源：互联网发布：中国移动数据流量卡编辑：程序博客网时间：2024/06/14 06:25
<!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>
阅读全文
0 0