[英]In Angular, on selected option set default values for other options
問題:如何將選定的 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
更新:我已經更新了小提琴,使其更加接近,但是原型繼承不存在。 我只是想說明預期的效果
更新2x Callebe給了我一個解決方案,使我離得更近,但仍然不希望或無法正常工作
我有一個簡單的控制器,其中有一些來自$ 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
簡單看看這個
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];
};
您可以聲明一個接收項目作為參數並計算其他屬性的控制器功能。
$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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.