JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<script src="https://code.angularjs.org/1.6.6/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div ng-app="myApp">
<div ng-controller="MyCtrl">

<div class="products">  
  <div class="products__header col-12">
  <h5 class="products__title" ng-bind="'Список товаров $this.a'"></h5>
  <div class="row">  
    <div class="col-6">
      <label>Наименование</label>
    </div>
    
    <div class="col-4">
      <label>Ссылка</label>
    </div>
    
    <div class="col-2">      
      <label>Кол-во</label>    
    </div>
  </div>
  
  <div class="products__product row" ng-repeat="$product in products" ng-class="{'_last': $last}">
      <div class="col-6">
        <input type="text" class="form-control" ng-attr-name="{{'request_product[' + $index + '][productName]'}}" ng-bind="$product.name"/>
      </div>
      
      <div class="col-4">        
        <input type="text" class="form-control" ng-attr-name="{{'request_product[' + $index + '][url]'}}" ng-bind="$product.url" />
      </div>
      
      <div class="col-2">
        <input type="number" class="form-control" ng-attr-name="{{'request_product[' + $index + '][count]'}}" ng-bind="$product.count" />
      </div>
    </div>

    <a href="javascript:void(0)" class="btn btn-primary" ng-click="addProduct()">
      Добавить +
    </a>
  </div>
</div>


</div>
</div>

CSS

.products__product {
  margin-bottom: 10px;
}
.products__product._last {
  margin-bottom: 20px;
}

JavaScript

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



var MyCtrl = myApp.controller('MyCtrl', ['$scope', function MyCtrl($s) {

    var newProduct = () => { return {name:"", url:"", count:0} };
    $s.a = 1;
    $s.products = [ newProduct() ];
    
    $s.addProduct = () => $s.products.push( newProduct() );
    $s.removeProduct =( $index ) => $s.products.splice( $index, 1 );
    
}]);