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

Question

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

Need to keep track of the value currently selected for each Season. (s1, s2)
Need to keep opacity at full when you select items from different groups.

Adlen Afane · Accepted Answer · 2014-08-25 08:56:43Z

2

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

edited Aug 25, 2014 at 8:56

answered Aug 22, 2014 at 13:41

Adlen Afane

1,57214 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Austin Over a year ago

This works perfectly! Is there an easy to way to click an item and unhighlight it if its already highlighted (checked)?

quw · Accepted Answer · 2014-08-22 13:45:13Z

1

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

edited Aug 22, 2014 at 13:45

answered Aug 22, 2014 at 13:27

quw

2,8741 gold badge28 silver badges36 bronze badges

8 Comments

Austin Over a year ago

that will not work with inputs I believe, or at least it isn't working in my Fiddle. I am using these "like" checkboxes, they are not actual checkboxes if you note the code.

quw Over a year ago

My mistake. I will update my answer with a way to style radio buttons to look like what you have.

Austin Over a year ago

Very cool, let me implement it into my app and make sure it works fine :)

quw Over a year ago

This will only work in Chrome/Safari as expected. It will not do anything in IE, and will still show the radio button borders in Firefox. If you need a cross browser solution, go with @AdlenAfane 's solution.

quw Over a year ago

IE does not support the appearance property, which allows disabling the default browser css of form elements.

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Related