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/

Answer 2

我已根据您的要求创建了一个干净的解决方案。

表示例如。如果您输入1234,5678作为输入，则应创建1234作为第一个芯片，5678作为第二个芯片on-enter以及键入comma。

在html中添加属性md-transform-chip并更改您的控制器

HTML

<md-chips ng-model="values" placeholder="Comma separated values" 
          md-separator-keys="seperatorKeys" md-transform-chip="addChips($chip)">
    <md-chip-template>
        <span>{{$chip}}</span>
    </md-chip-template>
</md-chips>

控制器

angular.module('home').controller('MainCtrl', function($scope, $mdConstant) {
  $scope.seperatorKeys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA];
  $scope.values = [];

  $scope.addChips = function(chips) {
    var chipsArray = chips.split(',');
    angular.forEach(chipsArray, function(chip) {
      if ($scope.values.indexOf(chip) < 0) { 
        $scope.values.push(chip);
      }
    });
    return null;
  };
});

工作fiddle

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

2 个答案: