在Angular中，在所选选项上设置其他选项的默认值

Question

问题：如何将选定的 sizes作为索引来映射并显示正确的price和tsin eq到sizes索引

---

注意：

• 我正在尝试在尺寸，价格，tsin之间建立关系

    "Black": { "sizes": "X Small, Small", "prices": '$22.24, $24.94', "tsin": "111002, 111003" }, 

例如，如果选择了黑色，并且选择的大小为索引[0]（或-X小），则在ng更改时，价格将更新为$ 22.24，而tsin为111002

---

更新：我已经更新了小提琴，使其更加接近，但是原型继承不存在。 我只是想说明预期的效果

更新的JSFiddle

更新2x Callebe给了我一个解决方案，使我离得更近，但仍然不希望或无法正常工作

JSFiddle

我有一个简单的控制器，其中有一些来自$ http的虚假数据：

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

app.controller('Ctrl', function ($scope, $filter, $http) {
    //lowest price is coming in from the init api request on production
    var lowestPrice = '$21.24';
    // exposes currentPrice to the view
    $scope.currentPrice = lowestPrice;

    // function to change the currentPrice to the selected Products price
    $scope.getCurrentPrice = function(idx) {
          $scope.currentPrice = idx;
    }
 //fake data that simulates a piece of the json object response. 
 $scope.productData = {
  "colors_and_sizes": {
    "data": {
      "Black": {
        "prices": '$21.24, $29.94',
        "swatch_image": 'http://lorempixel.com/50/50',
        "sizes": "X Small, Small",
        "prices": '$22.24, $24.94',
        "tsin": "111002, 111003"
      },
      "Blue": {

        "swatch_image": 'http://lorempixel.com/50/51',
        "sizes": "X Small, Small",
        "prices": '$22.24, $24.94',
        "tsin": "112005, 112007"
      }
    }
  }
};

});

注意：

• 我知道我知道，对于我想做的事情来说，数据输入非常糟糕。

sizes prices and tsin是字符串。 但是，当我进入视图时，我将它们拆分了：

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

                <!--split the sizes into an array call it choice -->
                <!--idx as choice  could be idx to get key but then breaks the value cannot do (idx, choice) as choice for (idx, choice) in val.sizes.split(',') -->
                ng-options="choice as choice for (idx, choice) in val.sizes.split(',')">
                <option value="">Please select a size</option>

                ng-change="setCurrentPrice(val.sizes.split(',')[idx])"
            </select>
        </div>

    </div>
</form>

最后，我希望在视图上显示4个值：

mySize: {{ item.mySize}}
myColor: {{item.myColor}}
myPrice: {{item.currentPrice}} 
myTsin: {{item.myTsin}} 

再次请检查我的（老版本更新） JSfiddle

Answer 1

简单看看这个

工作演示

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>

脚本

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

Answer 2

您可以声明一个接收项目作为参数并计算其他属性的控制器功能。

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

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