Angular Material:如何在输入中添加逗号分隔的字符串时添加多个芯片？

Question

我正在使用这种语法来创建芯片 -

<md-chips ng-model="someModel" md-separator-keys="seperatorKeys">
                            <md-chip-template >
                                <span>{{$chip}}</span>
                            </md-chip-template>
                        </md-chips>

这是控制器代码的一部分.

$scope.seperatorKeys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA];

现在我想创建多个芯片,如果我在输入中粘贴逗号分隔字符串来添加芯片,让我们说,例如,如果我输入1234,5678作为输入,它应该创建1234为第一个芯片和5678第二个芯片.

我该如何实现此功能？

Answer 1

显然，解决方案非常简单 - 类似于以下内容 ---

在控制器中，编写一个要在 上md-transform-chip使用的方法，并使用该方法操作范围内包含芯片的数组。

然后，return null这样就不会创建新的芯片。

 $scope.addMultipleChips = function (chip, model) {
        var seperatedString = angular.copy(chip);
        seperatedString = seperatedString.toString();
        var chipsArray = seperatedString.split();
        angular.forEach(chipsArray, function (chipToAdd) {
            $scope[model].push(chipToAdd);
        });
        return null;
    };

并像这样在模板中声明它 -

<md-chips ng-model="someModel" md-separator-keys="seperatorKeys"
md-transform-chip="addMultipleChips($chip, 'someModel')">
                                <md-chip-template >
                                    <span>{{$chip}}</span>
                                </md-chip-template>
                            </md-chips>

这是相同的 JSFiddle。 http://jsfiddle.net/vishwajeetv/2f6qscrp/255/