在ngTable中使用选择过滤器

时间:2015-10-17 07:27:43

标签: javascript angularjs ngtable

我正在使用选择值尝试此ngTable example过滤列。 HTML代码(表格部分)

 <table ng-table="tableParams" class="table" show-filter="true">
  <tbody>
    <tr ng-repeat="row in $data">
      <td data-title="'Name'" filter="{name: 'select'}" filter-data="names" sortable="'name'">{{ row.name }}</td>
      <td data-title="'Age'" filter="{age: 'text'}" sortable="'age'">{{ row.age }}</td>
    </tr>
  </tbody>
</table>

Javascript代码

var app = angular.module('ngTableApp', ['ngTable'])
      .controller('selectFilterController', function($scope, $filter, $q, NgTableParams) {
        var data = [{name: "Moroni", age: 50},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34}
                ];
        $scope.names = ['Moroni', 'Enos', 'Nephi'];
        $scope.tableParams = new NgTableParams({page: 1, count: 10}, {dataset: data});

      })

当我运行此代码plunker时,“名称”列的选择值为空。

example

  

选择过滤器将通过调用为列定义的 fetchData 函数来获取其数据。

但是,该示例中的代码中没有调用 fetchData 函数。我很困惑,这里的问题是什么?

2 个答案:

答案 0 :(得分:0)

example我发现ng-table用于HTML中 filter-data 属性的格式(对于选择值)是对象数组以下表格。

$scope.names = [{id: "", title: ""}, {id: 'Moroni', title: 'Moroni'}, {id: 'Enos', title: 'Enos'}, {id: 'Nephi', title: 'Nephi'}];

更新了plunker

答案 1 :(得分:0)

应该写成:

$scope.names = [{"id": "", "title": ""}, {"id": "Moroni", "title": "Moroni"}];