Question

我正在制作一系列＆＃34;单选按钮＆＃34;但是图像（意味着每个分组只能选择1个）。我的问题是我是Angular的新手，我似乎找不到跟踪value并将其存储为ng-model的方法。

另一方面，我也试图找到一种简单的方法，在选择时保持图像完全不透明，但是当你改变组选择时，它会使一切都不透明。（单击组1中的一个，然后组2中将删除组1的选择中设置的不透明度），是否有一个简单的角度属性，可以让我在更改组时保持项目保持清晰。

以下是 JSFiddle Demo ，它只有两个组，但您可以看到有关未更新的值的问题，并且在选择相反的组时图像会失去不透明度。

HTML （Angular代码只有变量s1，s2，ect ..）

<div style="background:white">

            <input value="2" class="pastElos" name="season1" type="image" src="{{images[0].source}}" title="Season1 Bronze" ng-model="s1" style="width:70px; height:75px" />
            <input value="3" class="pastElos" name="season1" type="image" src="{{images[1].source}}" title="Season1 Silver" ng-model="s1" />
            <input value="4" class="pastElos" name="season1" type="image" src="{{images[2].source}}" title="Season1 Gold" ng-model="s1" />
            <input value="5" class="pastElos" name="season1" type="image" src="{{images[3].source}}" title="Season1 Platinum" ng-model="s1" />

<br />
Current Season 1 Value:<span style="color:black">{{s1}}</span>
<hr />

            <input value="6" class="pastElos" name="season2" type="image" src="{{images[0].source}}" title="Season2 Bronze" ng-model="s2" style="width:70px; height:75px" />
            <input value="7" class="pastElos" name="season2" type="image" src="{{images[1].source}}" title="Season2 Silver" ng-model="s2" />
            <input value="8" class="pastElos" name="season2" type="image" src="{{images[2].source}}" title="Season2 Gold" ng-model="s2" />
            <input value="9" class="pastElos" name="season2" type="image" src="{{images[3].source}}" title="Season2 Platinum" ng-model="s2" />

<br />
Current Season 2 Value:<span style="color:black">{{s2}}</span>


        </div>

TLDR问题 JSFiddle Demo

需要跟踪每个季节当前选择的值。（s1，s2）
当您从不同的群组中选择项目时，需要保持不透明度。

Answer 1

如果您使用输入广播并将图像放在标签中，则可能会有您想要的行为

<input value="2" id="s1-2" name="season1" type="radio" ng-model="s1" />
<label for="s1-2">
    <img class="pastElos" src="{{images[0].source}}" title="Season1 Bronze"/>
</label>

请参阅JSFiddle

对于表单上的IE支持，您可以参考following article 错误报告是here

Answer 2

使用单选按钮样式上的:checked选择器，而不是:focus

同时将输入类型更改为radio并将背景图像应用于每个按钮。

示例输入：

<input value="2" class="pastElos" name="season1" type="radio" title="Season1 Bronze" ng-model="s1" style="background-image: url({{images[0].source}});" />

单选按钮样式：

.pastElos {
    /* ... */
    -moz-appearance: none;
    -webkit-appearance: none;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    outline: none;
}

JSFiddle

让模型跟踪输入的值属性 - AngularJS

2 个答案: