在“角度”中,在所选选项上设置其他选项的默认值
In Angular, on selected option set default values for other options
问题:如何将选定的sizes
作为索引,以映射和显示正确的price
和tsin
方程到sizes
索引
通知:
-
我正在尝试在尺寸,价格,tsin之间建立关系
"Black": { "sizes": "X Small, Small", "prices": '$22.24, $24.94', "tsin": "111002, 111003" },
例如,如果选择了黑色并且选择的尺寸为索引 [0](或 - X 小(,那么在 ng-change 上,价格将更新为 22.24 美元,并且 tsin 为111002
更新:我已经更新了小提琴以更接近一点,但原型继承不存在。 我只是想说明所需的效果
更新的 JSFiddle
更新 2 倍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
看看这个很简单
工作演示
.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];
}
}
您的网页:
<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>
相关文章:
- 选项设置文本值重复..有没有我可以检查的财产以避免重复
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 如果选定,如何将所选选项设置为 true
- 为什么从指令中更改外部作用域需要 scope.$apply(),即使我将范围选项设置为 false
- 使用 Javascript 函数根据所选选项设置 HTML 文本框值.但它似乎不起作用
- 拒绝在帧中显示,因为它将“X帧选项”设置为“SAMEORIGIN”
- 如何将第一个选择选项设置为始终为空
- 使用原版 JS 在下拉列表中将所选选项设置为大写
- Javascript OOP, getters, setters, run - D3.js - 通过选项设置使图形可重用
- 高图表 + 从 jquery 中的选项设置事件点击
- 具有查询 UI 折叠项的自定义绑定的选项设置
- 根据语言首选项设置提供语言文件
- 如何使用javascript和css为select中的选项设置不透明度
- 可以't将选择选项设置为默认选项
- Phonegap Corodva应用iOS的自定义启动页面选项(设置self.viewController.startP
- Chrome时区选项设置为Date.toLocaleString()
- 将第一个可见选项设置为默认值
- 如何对不同的选择选项设置不同的操作?
- 如何将下拉列表中的最后一个选项设置为使用D3.js选择
- 为在角度下拉列表中创建的默认空白选项设置占位符文本