ng 单击图像以选中单选框
ng-click on image to check a radiobox
问题
如何使相应的下拉列表在单击图像或复选框时可见。 最后,无线电盒将被隐藏。
目前,单选按钮确实被选中,但它确实使选项正确显示? 我认为这是一个范围界定问题。
实时代码
我有一系列颜色和尺寸:
app.controller('Ctrl', function ($scope, $filter, $http) {
$scope.productData = {
"colors_and_sizes": {
"data": {
"Black": {
"swatch_image": 'http://lorempixel.com/50/50',
"sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
},
"Blue": {
"swatch_image": 'http://lorempixel.com/50/50',
"sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
}
}
}
};
});
HTML:这是我的表格
<form ng-app="app" ng-controller="Ctrl">
<div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
<input type="radio" ng-checked="selected" name="colors" ng-model="$parent.myColor" ng-value="key" />
<img ng-click="selected = true" ng-src="{{val.swatch_image}}" alt="">{{key}}
<div class="size-pick" ng-show="$parent.myColor==key">
<select ng-model="$parent.mySize" ng-options="size for size in val.sizes.split(',')"></select>
</div>
</div>
myColor: {{myColor}}<br/>
mySize: {{mySize}}
</form>
目前,您定义了$parent.myColor
以保存单选按钮的值。因此,如果您希望能够根据所选图像显示下拉列表,则可以像已经做的那样在 img 标记上使用ng-click
,并为其分配新值。
<form ng-app="app" ng-controller="Ctrl">
<div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
<input type="radio" name="colors" ng-model="$parent.myColor" ng-value="key" />
<img ng-click="$parent.myColor = key" ng-src="{{val.swatch_image}}" alt="">{{key}}
<div class="size-pick" ng-show="$parent.myColor==key">
<select ng-model="$parent.mySize" ng-options="size for size in val.sizes.split(',')"></select>
</div>
</div>
myColor: {{myColor}}<br/>
mySize: {{mySize}}
</form>
自己试试吧。
相关文章:
- 如何防止jQuery中复选框单击时执行多个代码
- 复选框单击功能不起作用
- 复选框单击覆盖表行单击
- 如果父项具有onclick绑定,则复选框单击将被忽略
- 在数据网格中的复选框单击时使用 Databinder.Eval
- 切换复选框 - 单击父 DIV 元素
- 如何调用文本框代码隐藏文本更改事件从复选框单击位于网格视图行内
- 在复选框单击时清理我的jQuery代码
- 复选框单击事件处理程序和显示/隐藏功能
- 防止多次单击选中的单选框
- 保留 Google 地图在复选框单击时缩放到 kml 图层
- 复选框单击事件 jQuery 不起作用
- jQgrid:禁用复选框单击,仅在单击复选框时选中复选框
- 复选框单击的限制
- 计数 + / - 用于复选框单击和取消单击
- 放大复选框单击区域
- 复选框单击功能不起作用
- 根据复选框单击更改表单输入的值
- 复选框单击有效,取消选中复选框不工作Javascript
- 在复选框单击中,更改可以单击的按钮