JSFiddle - React, Tailwind, and code Playground

by Petru Bejan

HTML

<script src="https://code.angularjs.org/angular-1.0.0rc9.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app">
  <div class="wrapper" ng-controller="appCtrl">
    <div>
      <button ng-click="addRow()">Add row</button>
    </div>
    <div ng-repeat="item in items">
      <select ng-model="item.operator" ng-change="updateResult()" ng-disabled="item.disabled">
            <option>+</option>
            <option>-</option>
        </select>
      <input type="number" ng-model="item.number" ng-change="updateResult()" ng-disabled="item.disabled"/>
      <button ng-click="deleteRow($index)">Delete</button>
      <button ng-click="disableRow($index)">Disable</button>
    </div>
    <div>
      Result: {{result}}
    </div>
  </div>
</div>

JavaScript

/**
Partendo dalla seguente struttura, si scriva un semplice sommatore che permetta le seguenti funzionalità:
 - aggiunta / rimozione righe
 - segno per ogni riga
 - disabilitare / abilitare riga (esclusione dalla somma)
 
 Si è liberi di implementare direttive/servizi/filtri a piacimento se lo si ritiene necessario
 
 Si prega di commentare il codice scritto
**/
var app = angular.module('app', []);
app.controller('appCtrl', function($scope) {
//dichiaro l'array dove andrò ad inserire i numeri e gli operatori
  $scope.items = [{}];
//creo una nuova linea inserendo valori preimpostati nell'array
  $scope.addRow = function() {
    $scope.items.push({
      number: 0,
      operator: "+"
    });
  }
//uso la funzione splice che attraverso l'index trova l'elemento dentro l'array a cui lo riferisco e con il valore 1 indica la rimozione ed eseguo la funzione dell'aggiornamento del risultato essendo che ci sarà una riga in meno da calcolare 
  $scope.deleteRow = function($index) {
    $scope.items.splice($index, 1);
    $scope.updateResult();
  };
// creo una funzione di toggle che sarà richiamata dal disable button attraverso ng-click che mi permetterà di attivare e disattivare le righe in base allo stato in cui si trovano e aggiorno il risultato per le righe che saranno disablititate  
  $scope.disableRow = function(index){
    $scope.items[index].disabled = !$scope.items[index].disabled;
    $scope.updateResult();
  }
// creo la funzione risultato 
//la funzione risultato parte da un valore di 0 e calcola le righe abilitate con un filtro, dopodiché attraverso un ciclo for che parte da 0 fino alla fine degli elementi abilitati e ogni volta aggiungo o tolgo il valore attraverso l'IF in base al operatore .
//questa funzione sarà richiamata ogni volta che la pagina subirà dei cambiamenti affinché il risultato sia sempre dinamico. 
  $scope.updateResult = function() {
    $scope.result = 0;
    let enabledRows = $scope.items.filter(i=>!i.disabled);
    for (let i = 0; i <...