Question

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

enter image description here

有人可以告诉我如何将该字符限制为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>

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属性可以为您执行此操作，因此您可以避免使用该指令，只需将此属性添加到输入字段

将字符限制为10以用于过滤器text-field - ngTable

1 个答案: