An_form排序

<!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("你確定套清空購(gòu)物車所有商品嗎?")) {
                        $scope.goods = [];
                    }
                }

            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="search" placeholder="產(chǎn)品名稱"/>
        <button ng-click="removeAll()">全部刪除</button>
        <table border="1"cellspacing="0">
            <tr>
                <td>產(chǎn)品編號(hào)<button ng-click="sortProduct('id')">^</button></td>
                <td>產(chǎn)品名稱<button ng-click="sortProduct('name')">^</button></td>
                <td>產(chǎn)品價(jià)格<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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容