您的位置：首页 > Web前端 > AngularJS

HTML,angularJS表格内容排序,点击删除,删除当前,输入内容显示包含内容的数据

2017-10-15 20:08 579 查看 
TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，
于是我也迫不及待地申请了一个试用版来写一个小网页，
最近正在写到数据查询，表格显示的功能。表格组件在HTML5中是提供的，
查看TWaver提供的Demo,表格的使用还是比较多的，
于是参考了其中的一个Demo，新建一个表格，并给表格赋值。
很快一张表格就生成了。
4000
以下为案例,仅供参考!!!
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第二周练习</title>//导的js包<script src="angular.js"></script><script>var app = angular.module("myApp",[]);app.controller("myCtrl",function ($scope) {$scope.cpzong = [{id:80,name:"iphone",money:5400},{id:1200,name:"ipad mini",money:2200},{id:500,name:"ipad air",money:2340},{id:29,name:"ipad",money:1420},{id:910,name:"imac",money: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) {for(index in $scope.cpzong){if($scope.cpzong[index].name == name){$scope.cpzong.splice(index,1);}}}//全部删除$scope.deleteAll = function () {$scope.cpzong = null;}});</script></head><body ng-app="myApp" ng-controller="myCtrl"><center><input type="text" ng-model="serach" placeholder="产品名称" /><button ng-click="deleteAll()">删除全部</button><br/><br/><table id="tab" border="1px" cellpadding="10px" cellspacing="0px"><tr><th ng-click="sortProducts('id')">产品编号</th><th ng-click="sortProducts('name')">产品名称</th><th ng-click="sortProducts('money')">产品价格</th><th>功能</th></tr><tr ng-repeat="goods in [/b]cpzong | filter:serach | orderBy:(sortFlag+sortName)"><td>{{goods.id}}</td><td>{{goods.name}}</td><td>{{goods.money}}</td><td><a ng-click="deleteProduct(goods.name)">删除</a></td></tr></table></center></body></html>
完毕

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航