JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<div ng-app='app' ng-controller='InputsController'>
    <a href='' ng-click='add()'>HinzufĂĽgen</a>
    <p ng-repeat='input in inputs'>
        {{$index + 1}} / {{::limit}}
        <input type='text' ng-model='input.value' />
        Value: {{input.value}}
    </p>
</div>

CSS

a, p{
    display: block;
}

JavaScript

/**
 * @author lottikarotti
 */
angular.module('app', [])
.controller('InputsController', [
    '$scope',
    function($scope){
        angular.extend($scope, {
            /** @var {Array} */
            inputs: [],
            
            /** @var {Integer} */
            limit: 5,
            
            /**
             * Adds a new input field.
             * @return {void}
             */
            add: function(){
                if(this.inputs.length === this.limit){
                    alert('Only ' + this.limit + ' inputs allowed');
                    return;
                }
                this.inputs.push({
                    id: this.inputs.length,
                    value: ''
                });
            }
        });
    }
]);