Question

我正在尝试创建一个Ng表以及一个用于过滤结果的选择下拉菜单。这是我到目前为止所得到的。

1）如何摆脱因过滤菜单而产生的分页？我只需要一个分页。我明白我可以通过CSS .ng-table-pager {来做到这一点 display：none; }。然而，两个分页都将消失。

2）默认过滤器菜单为空白，显示所有数据。这很棒。如何将空白字段更改为＆＃34; ALL＆＃34;文字字段？

3）我可以在调用过滤函数之前添加一个提交按钮，而不是直接过滤吗？

＆＃13;

(function() {
    "use strict";

    angular.module("uCloud", ["ngTable"])
        .controller("myController", myController);

    myController.$inject = ["NgTableParams"];

    function myController(NgTableParams) {

        this.nameFilter = [
            {id:"teste1", title:"-> teste1"},
            {id:"teste2", title:"-> teste 2"},
            {id:"teste3", title:"-> teste 3"},
            {id:"teste4", title:"-> teste 4"},
            {id:"teste5", title:"-> teste 5"},
        ];



        this.objectTest = [

            {name: "teste1", description: "testando1"},
            {name: "teste2", description: "testando2"},
            {name: "teste3", description: "testando3"},
            {name: "teste4", description: "testando4"}
        ];

        this.tableParams = new NgTableParams({}, {
            dataset: this.objectTest
        });
    }
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>ng-table - Select Filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
</head>

<body>
<div ng-app="uCloud" class="container-fluid">
    <div class="row">
        <div class="col-md-3" ng-controller="myController as demo">
            <h3>ngTable</h3>
            <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
                <tr ng-repeat="row in $data">

                    <td data-title="'Name'"
                        filter-data="demo.nameFilter">{{row.name}}
                    </td>



                    <td data-title="'Description'"
                        filter-data="demo.descriptionFilter">{{row.description}}
                    </td>


                </tr>
            </table>

            <table ng-table="demo.tableParams" class="">

            <td data-title="'Name'"
                filter="{name: 'select'}"
                filter-data="demo.nameFilter">All{{row.name}}
            </td>            </table>




        </div>
    </div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js'></script>

<script src='https://unpkg.com/ng-table/bundles/ng-table.min.js'></script>
<script src="index.js"></script>

</body>
</html>

＆＃13;

Answer 1

首先要做的事情是：警告，你需要两次加载Angular。摆脱指向Angular的<script>标签之一。

1）如何摆脱因过滤菜单而产生的分页？我只需要一个分页。

您会看到两个分页控件，因为您已创建了两个ng-table。您需要删除过滤器的表，并使用正常的select HTML元素。

  <select ng-model="demo.tableParams.filter()['name']">
    <option value="">All</option>
    <option value="teste1">->teste1</option>
    <option value="teste2">->teste2</option>
    <option value="teste3">->teste3</option>
    <option value="teste4">->teste4</option>
    <option value="teste5">->teste5</option>
  </select>

2）默认过滤器菜单为空白，显示所有数据。这很棒。如何将空白字段更改为＆＃34; ALL＆＃34;文字字段？

如上所示，只需添加option value=""。这将使数据集中的所有项目都匹配。

3）我可以在调用过滤函数之前添加一个提交按钮，而不是直接过滤吗？

查看NgTable samples - change filter values programmatically。

工作演示here。

＆＃13;

    angular.module("uCloud", ["ngTable"])
  .controller("myController", myController);

myController.$inject = ["NgTableParams"];

function myController(NgTableParams) {

  this.tableParams = new NgTableParams({}, {
    dataset: [{
      name: "teste1",
      description: "testando1"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }],
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src='https://unpkg.com/ng-table/bundles/ng-table.min.js'></script>
<script src="index.js"></script>
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>ng-table - Select Filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
</head>

<body>
<div ng-app="uCloud" class="container-fluid">
  <div class="row">
<div class="col-md-3" ng-controller="myController as demo">
  <h3>ngTable</h3>
  <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
    <tr ng-repeat="row in $data">
      <td data-title="'Name'" filter-data="demo.nameFilter">{{row.name}}
      </td>
      <td data-title="'Description'" filter-data="demo.descriptionFilter">{{row.description}}
      </td>
    </tr>
  </table>
  <select ng-model="demo.tableParams.filter()['name']">
    <option value="">All</option>
    <option value="teste1">->teste1</option>
    <option value="teste2">->teste2</option>
    <option value="teste3">->teste3</option>
    <option value="teste4">->teste4</option>
    <option value="teste5">->teste5</option>
  </select>
</div>
  </div>
</div>


</body>
</html>

＆＃13;

ng-table通过选择下拉菜单过滤

1 个答案: