将过滤器文本字段的字符限制为 10 - ngTable答案

【问题标题】：limit the character to 10 for filter text-field - ngTable将过滤器文本字段的字符限制为 10 - ngTable
【发布时间】：2015-02-07 09:11:16
【问题描述】：

我已经创建了一个使用 angularjs 和 ngTable 的应用程序，该应用程序具有过滤功能，该应用程序也可以正常工作，但根据我的要求，过滤文本字段应该只接受 10 个字符

谁能告诉我如何将该文本字段的字符限制为 10，我的代码如下所示：

JSFiddle

脚本

$scope.tableParams = new ngTableParams({
    page: 0, 
    count: 0
}, {
    total: 0, 
    counts:[],
    getData: function ($defer, params) {
        // use build-in angular filter
        var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data;

        $defer.resolve(orderedData);
    }
});

html

<div ng-app="main" ng-controller="DemoCtrl">
    <table ng-table="tableParams" show-filter="true" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" filter="{ 'name': 'text' }">{{user.name}}</td>
            <td data-title="'Age'">{{user.age}}</td>
        </tr>
    </table>
</div>

【问题讨论】：

标签： angularjs filter ngtable

【解决方案1】：

您不能使用 ng-table 提供的指令轻松做到这一点。为了实现这一点，您必须创建自己的输入过滤器，将其应用于 ng-repeat 并使用一个简单的指令来限制输入字段的字符。

这是一个工作示例，希望对您有所帮助。 fiddle

HTML：

<div ng-app="main" ng-controller="DemoCtrl">
    <table ng-table="tableParams" class="table">
        <!-- first row with custom input filterer using the charLimit directive -->
        <tr>
            <td data-title="'Name'"><input char-limit="10" ng-model="textFilter"/></td>
            <td data-title="'Age'"></td>
        </tr>
        <!-- declare the filter on your ng-repeat directive -->
        <tr ng-repeat="user in $data | filter: { 'name': textFilter }">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>
</div>

指令：

directive('charLimit', function(){
    return {
        scope: {
            limit: '@charLimit',
            model: '=ngModel'
        },
        require: 'ngModel',
        restrict: 'A',
        link: function($scope, $node) {
            var limit = $scope.limit ? parseInt($scope.limit, 10) : 0;
            $scope.$watch('model', function(val) {
                if(limit>0 && !isNaN(limit))
                    $scope.model = $scope.model.slice(0,limit);                        
            });
        }
    };
})

编辑

一个名为 maxlength 的 html5 属性可以为您执行此操作，因此您可以避免该指令，只需将此属性添加到您的输入字段中

【讨论】：