Limit character to 10 for filter text field - ngTable

Question

I created an application using angularjs and ngTable with a filtering function, the application works fine and filtering, but the filtering text field should only accept 10 characters as per my requirement

Can someone tell me how to limit the character to 10 for this text box, my code is below:

Jsfiddle

script

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

---

html5, maxlength, ,