In Angular, On Selected Option Set Default Values For Other Options

Question: How can I take the selected sizes as an index to map and display the proper price and tsin eq to the sizes index Notice: I'm trying to create a relationship between siz

Solution 1:

Its simple take a look at this

Working Demo

html

<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>

script

$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];
    };

Solution 2:

You can declare a controller function that receive item as parameter and calculate the others attributes.

$scope.fillItem = function(item) {
    var color = $scope.productData.colors_and_sizes.data[item.myColor];
    if(!color) return;

    var size = item.mySize,
    index = -1, i = 0,
    sizes = color.sizes.split(","),
    prices = color.prices.split(","),
    tsin = color.tsin.split(",");

    while(index == -1 && i < sizes.length) {
        if(sizes[i] == size) index = i;
        i++;
    }

    if(index >= 0) {
        item.currentPrice = prices[i];
        item.myTsin = tsin[i];
    }
}

your html:

<img  ng-click="item.myColor = key; fillItem(item);" 
      ng-src="{{val.swatch_image}}" 
      alt="">

<div class="size-pick" ng-show="item.myColor==key">
        <select 
            ng-model="item.mySize"
            ng-change="fillItem(item);"
            ng-options="choice as choice for (idx, choice) in val.sizes.split(',')">
            <option value="">Please select a size</option>
        </select>
    </div>