Angular Материал: Как добавить несколько фишек, если во входной строке добавлена строка с разделителями-запятыми?

Я использую этот синтаксис для создания фишек -

<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 в качестве второго чипа.

Как я могу достичь этой функциональности?

Ответ 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/

Ответ 2

Я создал чистое решение, которое работает в соответствии с вашими требованиями.

для Eg. когда, если вы вводите 1234,5678 в качестве входа, он должен создать 1234 в качестве первого чипа и 5678 в качестве второго чипа on-enter, а также при вводе comma.

Добавить атрибут md-transform-chip в html и изменить свой контроллер, например

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) {
      $scope.values.push(chip);
    });
    return null;
  };
});

Работа fiddle