在角上所选选项设置默认值其他选项 [英] In Angular, on selected option set default values for other options
问题描述
问：
我怎么能在选择 尺寸作为索引映射和显示适当的价格和衙前 EQ到尺寸首页
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
注意：
-
我试图创造的尺寸，价格之间的关系，衙前
I'm trying to create a relationship between sizes, prices, tsin
"Black": {
"sizes": "X Small, Small",
"prices": '$22.24, $24.94',
"tsin": "111002, 111003"
},
的例如。如果颜色是黑色和采摘选择的尺寸为指数[0]（或 - X小）然后在NG-更改价格将更新至$ 22.24及衙前为111002 的
更新：
我已经更新了小提琴变得有点接近，但原型继承是不存在的。我只是想说明预期的效果。
UPDATE: I've updated the fiddle to get a bit closer but the prototypical inheritance isn't there. I just wanted to illustrate the desired effect
UPDATED JSFiddle
已更新2倍
Callebe给了我得到我更接近，但仍然不希望或正常工作的解决方案
UPDATED 2x Callebe gave me a solution that gotten me closer but still not desired or working properly
我有一些假的数据从$ HTTP进来一个简单的控制器：
I have a simple controller with some fake data coming in from an $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"
}
}
}
};
});
注意：
- 我知道我知道，该数据在pretty未来很糟糕的我想要做的。
在尺寸价格和衙前都是字符串。不过，我分裂他们他们当我到达的看法：
the sizes prices and tsin are strings. However, I split them them when I get to the view:
<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个值在视图中显示：
in the end I would like 4 values to be displayed on the view:
mySize: {{ item.mySize}}
myColor: {{item.myColor}}
myPrice: {{item.currentPrice}}
myTsin: {{item.myTsin}}
再请看看我的（OLD FIDDLE更新以上）的 的jsfiddle
Again please check out my (OLD FIDDLE UPDATE ABOVE) JSfiddle
推荐答案
其简单的看看这个
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>
脚本
$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];
};
这篇关于在角上所选选项设置默认值其他选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
