An_form排序

作者: android_en | 来源:发表于2017-09-17 20:42 被阅读9次

An_form排序
An_form验证
An_form服务应用
An_form购物车（angular js）
【恋上数据结构与算法二】(一)排序(Sorting)
排序-冒泡排序
排序
Java | 10种排序算法
常见的排序
002--20200409刷题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.js" ></script>
          <style>  
            .redColor{  color:red;  }  
          </style>  
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.goods=[{"id":80,"name":"iphone","price":5400},
                {"id":1200,"name":"ipad mini","price":2200},
                {"id":500,"name":"ipad air","price":2340},
                {"id":29,"name":"ipad","price":1420},
                {"id":910,"name":"imac","price":15400}];
                $scope.orderColumn="name";
                $scope.orderSign="-";
                $scope.sortProduct=function(sortColumn){
                    $scope.orderColumn=sortColumn;
                    if($scope.orderSign=="-"){
                        $scope.orderSign="";
                    }else{
                        $scope.orderSign="-";
                    }
                }
                 $scope.remove = function(name) {
                    if(confirm("确定要清空"+name+"吗")) {
                        var p;
                        for(index in $scope.goods ){
                            p=$scope.goods[index];
                            if(p.name==name){
                                $scope.goods.splice(index,1);
                            }
                        }
                    }
                }
                 $scope.removeAll = function() {
                    if(confirm("你确定套清空购物车所有商品吗?")) {
                        $scope.goods = [];
                    }
                }

            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="search" placeholder="产品名称"/>
        <button ng-click="removeAll()">全部删除</button>
        <table border="1"cellspacing="0">
            <tr>
                <td>产品编号<button ng-click="sortProduct('id')">^</button></td>
                <td>产品名称<button ng-click="sortProduct('name')">^</button></td>
                <td>产品价格<button ng-click="sortProduct('price')">^</button></td>
                <td><a>删除</a></td>
            </tr>
            <tr ng-repeat="x in goods | filter:{'name':search}|orderBy:(orderSign + orderColumn)">
                <td>{{x.id }}</td>
                <td>{{x.name}}</td>
                <td>{{x.price |currency :"(RMB)"}}</td>
                <td ng-click="remove(x.name)"><a>删除</a></td>
            </tr>
        </table>
    </body>
</html>