JSFiddle - React, Tailwind, and code Playground

by MrRampage

HTML

<div ng-app='app' ng-controller="ctrl">
    <div ng-repeat='item in items' on-submit-focus="1">
        <input class='colData' type='text' ng-model='data[$index]' on-press-enter="addRow(someVar)"/>
    </div>
    <button ng-click="submit()">
        Submit
    </button>
</div>

JavaScript

function ctrl($scope, $timeout) {
    $scope.items = [ 'thing 1', 'thing 2', 'thing 3' ];
    $scope.data = [];
    
    $scope.addRow = function(newEntry) {
        var entry = newEntry || 'thing ' + $scope.items.length + 1;
        $scope.$evalAsync(function() {
            $scope.items.push(entry);
        });
    };
    
    $scope.submit = function() {
        console.log("Simulating a submit");
        $scope.$broadcast("formSubmitted");
    };
}

function onSubmitFocus() {
    return function($scope, $element, $attr) {
        $scope.$on('formSubmitted', function() {
            if ($scope.$index === +$attr.onSubmitFocus) {
                $element.children()[0].focus();
            }
        });
    };
}

function onPressEnter() {
    return {
        restrict : 'A',
        require: '^ngModel',
        scope: {
            onPressEnter: '&'
        },
        link: function($scope, $element, $attr, $ctrl) {
            $element.on('keyup', function(e) {
                if (e.which === 13) {
                    $scope.onPressEnter();
                }
            });
        }
    }
};

angular.module('app', [])
       .directive('onPressEnter', onPressEnter)
       .directive('onSubmitFocus', onSubmitFocus);