如何限制 md-chip 值的字符?

How can I restrict characters of a md-chip value?

我正在使用 md-chips。现在我想限制字符为10.

我尝试了 md-maxlength,这是一种限制字符的客户指令,但它全部在文本区域中工作并且输入不在芯片中


筹码限制


限制可以添加到 'chips' 模型的筹码数量:

<md-chips ng-model="myItems" placeholder="Add an item" md-max-chips="5">
</md-chips>

演示:https://jsfiddle.net/suunyz3e/290/

您不能向该输入添加超过 5 个筹码。

不幸的是,md-chips 指令的验证控制非常少:

来自(AngularJS Material

Validation

  • allow a validation callback
  • hilighting style for invalid chips

字符筹码限制


如果您超出了字符数限制,您可以这样做:

<md-chips ng-model="myItems" placeholder="Add an item" md-max-chips="5"  md-on-add="validateChip($chip)">
</md-chips>

控制器:

angular.module('sandbox', ['ngMaterial']).controller('testCtrl', function($scope) {
    $scope.myItems = [];
    $scope.validateChip = validateChip;

    var characterLimit = 10;
    function validateChip($chip) {
        if (!$chip) return;
        // check if the current string length is greater than or equal to a character limit.
        if ($chip.length >= characterLimit) {
            alert('whooaaa, you breached the limit yo!');
            // remove the last added item.
            $scope.myItems.pop();
        }
    }
});

演示:https://jsfiddle.net/suunyz3e/291/