Adding a comma after every input HTML/JS

Issue

I've seen quite a few listings related to this question but none of them seem to work or don't exactly fit my requirements.

I have an HTML document with an input type="text". I am trying to accept numbers from the user and after every input, a comma will appear.

Ex.

User Enters 1234 -> Display 1,2,3,4

I would like the values to be saved to an array on the back side so same example

array[0] = 1
array[1] = 2
array[2] = 3
array[3] = 4

My HTML FILE Looks like this

<div class="input-group mb-3">
    <input type="text" ng-keyup="format(this)">
</div>

The top DIV CLASS utilizes a ng-controller

<div class="modal-body" ng-controller="SplitCtrl">

I am just curiously how I can call that controller to create a function that will separate my inputs.

Solution

I would do something like this:

<div ng-controller="SplitCtrl">
  <div class="input-group mb-3">
    <input type="text" ng-model="text" ng-keyup="format($event)">
  </div>
</div>

var app = angular.module('myApp', []);

app.controller('SplitCtrl',['$scope' ,function ($scope) {
  $scope.format = function(e) {
    if ($scope.text.length > 1) {
      var text = $scope.text.split('').filter(function(_, i) {
        return (i % 2) === 0;//filter out previous commas
      }).join('') + e.key;
      $scope.text = text.split('').join(',');
    }
  }
}])

Answered By - pachonjcl