JSFiddle - React, Tailwind, and code Playground

by forivall

HTML

<body ng-controller="MainCtrl">
    <p ng-repeat="slider in sliders">
        Slide {{ $index + 1 }}
        <input type="number" ng-model="slider.assets"></input>
        <input type="number" ng-model="slider.roa"></input>
        
    </p>
    
    <h2>Main Slide</h2>
    Assets: <span ng-bind="mainSlide.assets"></span>
    <button ng-click="modifyAll(1)">Up</button>
    <button ng-click="modifyAll(-1)">Down</button>
    Roa: <input type="number" ng-model="mainSlide.roa"></input>
    
</body>

JavaScript

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

app.controller('MainCtrl', function($scope) {
  
  var sum = function(array) { return array.reduce(function(total, next) { return total + (+next); }, 0) };
  var closeTo = function(a, b, threshold) { return a == b || Math.abs(a - b) <= threshold; };
  
  $scope.sliders = [
  $scope.slide1 = {
    assets: 10,
    roa: 20
  },
  $scope.slide2 = {
    assets: 5,
    roa: 10
  },
  $scope.slide3 = {
    assets: 5,
    roa: 10
  },
  $scope.slide4 = {
    assets: 5,
    roa: 10
  },
  $scope.slide5 = {
    assets: 5,
    roa: 10
  }];
  
  
  $scope.mainSlide = {
    assets: 0,
    roa: 0
  };
  $scope.calculateSum = function() {
    return sum($scope.sliders.map(function(slider) { return slider.assets; }));
  };
  $scope.$watch('calculateSum()', function(newSum, oldSum) {
      $scope.mainSlide.assets = newSum;
    });
  $scope.modifyAll = function(amount) {    
      angular.forEach($scope.sliders, function(slider) { slider.assets += amount; });
    };

});