Angularjs 将筛选文本字段-ngTable的字符限制为10

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

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

脚本

$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>

{{user.name}
{{user.age}

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

下面是一个工作示例，希望它能帮助您。

HTML:

---

编辑

一个名为

maxlength

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

<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);                        
            });
        }
    };
})