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

Question

我已经使用 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>

Answer 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 属性可以为你做，这样你就可以避免指令，只需将此属性添加到你的输入字段