在Angular中，对于选定的选项设置其他选项的默认值
在Angular中，对于选定的选项设置其他选项的默认值
问题：
如何将选定的大小作为索引来映射和显示相应的价格和tsin等于大小的索引
注意：
我正在试图在大小、价格和tsin之间建立关系
"Black": {
"sizes": "X Small, Small",
"prices": '$22.24, $24.94',
"tsin": "111002, 111003"
},
例如，如果选择了黑色，并且选择的大小是索引[0]（或-X Small），则在ng-change上价格会更新为$22.24，tsin为111002
更新：
我更新了fiddle以更接近目标效果，但原型继承还没有。我只是想说明期望的效果。
我有一个简单的控制器，从$http获取一些虚假数据：
var app = angular.module("app", []);
app.controller('Ctrl', function ($scope, $filter, $http) {
//最低价格来自生产环境上的初始api请求
var lowestPrice = '$21.24';
//将currentPrice暴露给视图
$scope.currentPrice = lowestPrice;
//将当前价格更改为所选产品的价格的函数
$scope.getCurrentPrice = function(idx) {
$scope.currentPrice = idx;
}
//模拟一个json对象响应的一部分的虚假数据。
$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"
}
}
}
};
});
注意：
我知道，数据对于我要做的事情来说很糟糕。
大小、价格和tsin是字符串。然而，当我到达视图时，我将它们分割：
问题出现的原因是在Angular中，当选中一个选项时，无法设置其他选项的默认值。解决方法是在控制器中声明一个函数，该函数接收item参数并计算其他属性的值。在HTML中，通过ng-click和ng-change指令调用该函数来更新其他选项的值。
$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];
}
}
以上是问题的原因和解决方法。但是根据提供的代码和描述，问题似乎还没有得到解决。在更新颜色时，价格和tsin的值没有正确更新。
在Angular中，当选择一个选项时，如何为其他选项设置默认值？
问题的出现原因：
在给定的代码中，当选择一个尺寸（size）选项时，会根据选择的尺寸更新价格（price）和产品编号（tsin）。然而，当改变颜色（color）选项时，并不会更新尺寸选项的默认值。问题是如何在改变颜色选项时，更新尺寸选项的默认值。
解决方法：
为了解决这个问题，我们可以在颜色选项的ng-change事件中添加一个函数，该函数将会重置尺寸选项的默认值为"Please select a size"。
修改后的代码如下：
在Angular控制器中，添加一个resetSizeSelection()函数来重置尺寸选项的默认值为"Please select a size"：
$scope.resetSizeSelection = function() {
$scope.item.mySize = "";
};
这样，当改变颜色选项时，尺寸选项的默认值会被重置为"Please select a size"。
通过以上的修改，问题得到了解决。现在，当改变颜色选项时，尺寸选项的默认值会被正确地更新为"Please select a size"。