JSFiddle - React, Tailwind, and code Playground

by MrRampage

HTML

<div ng-app='app' ng-controller="ctrl">
    <div ng-repeat='item in items'>
        <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 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();
                }
            });
            
            $scope.$on("formSubmitted", function() {
                if ($scope.$parent.$first) {
                    $element[0].focus();
                }
            });
        }
    }
};

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