ng-table过滤来自作用域的连接值

时间:2014-12-17 16:12:49

标签: javascript angularjs angularjs-directive angularjs-ng-repeat ngtable

我使用ngTable在AngularJs中创建了一个应用程序,我使用ngTable来显示用户数据,并且根据要求,我必须使用表中的单个列来按名字和名字进行过滤,这些名称在{{ 1}}我在表格单元格上连接结果。但我不能通过连接过滤。

我已经尝试创建一个自定义过滤器,如http://bazalt-cms.com/ng-table/example/11上所述,以完成此任务,但到目前为止还未成功。

我可以通过循环遍历数组来修改接收数据的范围,但结果集预计会非常大,我认为这不是正确的方法。

以下是一个简化示例。是否存在使用模型或过滤器按连接字符串过滤的“角度方式”?

$scope
var app = angular.module('app', ['ngTable']);

app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
     $scope.people = [{
        "id": 1,
            "firstName": "Chuck",
            "lastName": "Norris",
    }, {
        "id": 2,
            "firstName": "John",
            "lastName": "Lennon",
    }, {
        "id": 3,
            "firstName": "Bender",
            "lastName": "Rodriguez",
    }];
    $scope.peopleCopy = $scope.people;
    $scope.mytable = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'desc'
        }
        
    }, {
        getData: function ($defer, params) {
           $scope.people = angular.copy($scope.peopleCopy);
           var filteredData = $filter('filter')($scope.people, params.filter());
             $scope.people = $filter('orderBy')(filteredData, params.orderBy());
             $defer.resolve($scope.people);
        }
    });
});

2 个答案:

答案 0 :(得分:1)

您可以创建一个查看两个字段的过滤器功能

 $scope.people = [{
    "id": 1,
        "firstName": "Chuck",
        "lastName": "Norris",
}, {
    "id": 2,
        "firstName": "John",
        "lastName": "Lennon",
}, {
    "id": 3,
        "firstName": "Bender",
        "lastName": "Rodriguez",
}];

$scope.filterLastAndFirst= function(person, searchParam){
    return person.firstName.indexOf(searchParam) !== -1 || person.lastName.indexOf(searchParam) !== -1;
};

<li ng-repeat="item in products | filterLastAndFirst: searchParam">{{item.name}}</li>
// where $scope.searchParam is defined

或过滤器

app.filter('lastAndFirstFilter', function(){
    return function(objectArray, searchParam){
        var toReturn = [];
        // parse the array and search for a parameter.
        angular.forEach(objectArray, function(value){
            if(value.lastName.indexOf(searchParam) !== -1 || value.firstName.indexOf(searchParam) !== -1)
                toReturn.push(value);
        });
        return toReturn; // return the array 
    }
});

// used like this:
var filtered = $filter('lastAndFirstFilter')($scope.people, searchTerm);

答案 1 :(得分:0)

很明显,我使用一个简单的过滤器解决了过滤问题(如下所示)。它将值person.fullName添加到表

中ng-repeat中使用的当前对象集合中
 $scope.getFullName = function(person) {
     return person.fullName = person.name + ' ' + person.lastName;
 }

并在ngTable的ng-repeat

中引用它
<tr ng-repeat="person in $data | filter:getFullName">

然后在需要的地方使用{{person.fullName}}对象的新添加值(在过滤器和单元格值中)。

<td data-title="'Name'" sortable="'person.fullName'" 
    filter="{ 'fullName': 'text' }" header-class="ngtable-header"
    class="ngtable-td">{{ person.fullName }}</td>