HTML angular对表格内容进行排序,删除,模糊查找

最新推荐文章于 2023-07-01 15:23:08 发布

weixin_34240520

最新推荐文章于 2023-07-01 15:23:08 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qq402792989/p/7673903.html

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           table{border: 1px solid deepskyblue;}
       </style>
       <script type="text/javascript" src="angular.js" ></script>
       <script>
           var app = angular.module('myapp', []);
           app.controller('myctrl', function($scope) {
               $scope.nc=function(name){
//                 $scope.data.splice(name,1);
                   for(index in $scope.data){
                       if($scope.data[index].name == name){
                           //i = index;
                           $scope.data.splice(index,1);
                       }
                   }
                }

               //全部删除
               $scope.dete= function(){
                   $scope.data = null;
               }

              $scope.col = 'name';//默认按name列排序
              $scope.gen = "";
              $scope.desc = 0;//默认排序条件升序
              $scope.data = [{
                name: 1,
                gender: 'OPPO',
                age: 26,
                score: '删除'
              }, {
                name: 20,
                gender: '华为',
                age: 24,
                score: '删除'
              }, {
                name: 13,
                gender: '小米',
                age: 20,
                score: '删除'
              }, {
                name: 4,
                gender: 'iPhone',
                age: 22,
                score: '删除'
              }];
           });

       </script>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
       <input type="text" placeholder="产品名称" ng-model="gen"/>
       <input type="button" value="全部删除" ng-click="dete()"/>
       <table border="1px" cellspacing="0px">
            <tr>
              <th ng-click="col='name';desc=!desc">产品编号</th>
              <th ng-click="col='gender';desc=!desc">产品名称</th>
              <th ng-click="col='age';desc=!desc">产品价格</th>
              <th>删除</th>
            </tr>
            <tr ng-repeat="d in data| filter:{gender:gen} |orderBy:col:desc">
              <td ng-bind="d.name"></td>
              <td ng-bind="d.gender"></td>
              <td ng-bind="d.age"></td>
              <td ng-bind="d.score" ng-click="nc(d.name)"></td>
            </tr>
       </table>
   </body>
</html>