JSFiddle - React, Tailwind, and code Playground

by Nidhish Krishnan

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<form ng-app="app" ng-controller="Ctrl"  ng-init="item = this">
    <div class="color-pick" 
         ng-repeat="(key, val) in productData.colors_and_sizes.data track by $index">
        <input 
             type="radio" 
             name="colors" 
             hidden="true"  
             ng-model="item.myColor" 
             ng-value="key" />
             
        <img 
             ng-click="item.myColor = key" 
             ng-src="{{val.swatch_image}}" 
             alt="">
        {{key}} 
                 
        <div class="size-pick" ng-show="item.myColor==key">
            <select 
                ng-model="item.mySize"
                ng-change="setCurrentPrice(val.sizes.split(','),val.prices.split(','),val.tsin.split(','))"
                ng-options="choice as choice for (idx, choice) in val.sizes.split(',')">
                <option value="">Please select a size</option>
            </select>
            
        </div>
           
    </div>
    mySize: {{item.mySize}}<br />
    myColor: {{item.myColor}} <br /><br />
    myPrice: {{item.currentPrice}}<br /> 
    myTsin: {{item.myTsin}} <br />
             <hr>
                 <h4>Price and Tsin wont update accordingly</h4>
                 <pre>
                     <p>The Price and Tsin are always mapped to the sizes string (which I split to an array) <p>e.g. if the color black was picked and the size selected was of index [0](or - X Small) then on ng-change the price would update to $22.24 and the tsin is 111002</p></p>
                     myPrice: {{item.myPrice}}<br /> 
                     myTsin: {{item.myTsin}} <br />
                     
                 </pre> 
                 <hr>
</form>

CSS

h4 {
    text-transform: uppercase;
}
p +p {
    color: red
}

JavaScript

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

app.controller('Ctrl', function ($scope, $filter, $http) {
    $scope.lowestPrice = '$21.24';
    $scope.currentPrice = $scope.lowestPrice;
    
$scope.setCurrentPrice = function(sizes, prices, tsin) {
        var index = sizes.indexOf($scope.item.mySize);
        $scope.item.myPrice = prices[index];
        $scope.item.myTsin = tsin[index];
        $scope.item.currentPrice = prices[index];
        $scope.item.mySize = sizes[index];
    };
    
    
 $scope.productData = {
  "colors_and_sizes": {
    "data": {
      "Black": {
        "prices": '$21.24,$29.94',
        "swatch_image": 'http://lorempixel.com/50/50',
        "sizes": "X Small,Small",
        "tsin": "111002, 111003"
      },
      "Blue": {
        
        "swatch_image": 'http://lorempixel.com/50/51',
        "sizes": "X Small, Small",
        "prices": '$22.24,$24.94',
        "tsin": "112005, 112007"
      }
    }
  }
};
                            
});