anguler 升序降序排序

最新推荐文章于 2018-07-09 17:15:35 发布

zhaochuang4858529

最新推荐文章于 2018-07-09 17:15:35 发布

阅读量320

点赞数

本文链接：https://blog.csdn.net/zhaochuang4858529/article/details/79030201

版权

<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.js"></script>
       <script>
           var app=angular.module("MyApp",[]);
           app.controller("myCtrl",function($scope){
               //准备数据
               $scope.goods=[{
                   name:"云南白药",
                   num:100,
                   address:"云南",
                   price:19.9,

               },{
                   name:"老白干",
                   num:200,
                   address:"陕北",
                   price:19.6
               },{
                   name:"999感冒灵",
                   num:30,
                   address:"和北",
                   price:2.6
               },{
                   name:"感冒灵",
                   num:60,
                   address:"北",
                   price:5.6
               }];
               $scope.orderKey = "";
           });
       </script>

   </head>
   <body ng-app="MyApp" ng-controller="myCtrl">
       排序规则:<select ng-model="orderkey">
           <option value="num">按数量升序</option>
           <option value="-num">按数量降序</option>
           <option value="price">按价格升序</option>
           <option value="-pirce">按价格降序</option>
       </select>
   <table border="1">
       <tr>
       <th>名字</th>
       <th>数量</th>
       <th>地址</th>
       <th>价格</th>
       </tr>
       <tr ng-repeat="g in goods | orderBy:orderkey">
           <td>{{g.name}}</td>
           <td>{{g.num}}</td>
           <td>{{g.address}}</td>
           <td>{{g.price|currency:"￥"}}</td>
       </tr>
   </table>
   </body>
</html>

zhaochuang4858529

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
anguler 升序降序排序

var app=angular.module("MyApp",[]); app.controller("myCtrl",function($scope){ //准备数据 $scope.goods=[{ name:"云南白药",
复制链接

扫一扫