CODEWITHSUNDEEP
javascripthtmlcssangularjs
Austin
Austin

Reputation: 3080

Have model keep track of input's value attribute - AngularJS

I am making a series of "radio buttons" but are images (meaning only 1 can be chosen per grouping). My problem is that I am new to Angular and I cannot seem to find a way to keep track of the value and store that as my ng-model.

On a side note, I also am trying to find a simple way to keep images at full opacity when selected, but when you change group selection it un-opacities everything. (click one in group one, then in group 2 will remove the opacity set on group 1's selection), is there a simply angular attribute that will allow me to keep items remain in focus when changing groups.

Here is a JSFiddle Demo, it just has two groups but you can see the issue in regards to the value not updating, and the images loses opacity when the opposite group is selected.

HTML (Angular code just has the variables 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 ISSUES JSFiddle Demo

  1. Need to keep track of the value currently selected for each Season. (s1, s2)

  2. Need to keep opacity at full when you select items from different groups.

Upvotes: 0

Views: 130

Answers (2)

Adlen Afane
Adlen Afane

Reputation: 1542

If you use an input radio and put your image in label you may have the behavior you want

<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>

See JSFiddle

For IE support on form you may refer to the following article The bug report is here

Upvotes: 2

quw
quw

Reputation: 2854

Use the :checked selector on your radio button styles, instead of :focus

Also change your input type to radio and apply a background image to each button.

Example input:

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

Radio button styles:

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

JSFiddle

Upvotes: 1

Related Questions