How to check input radio from a button - AngularJS

Question

I'm trying to make a work a simple task without lucky, I'm trying to check an input radio by clicking on a button. Each input radio as their button. How do you achieve that in angular way?

<button class="btn btn-primary">

        <input type="radio" ng-model="color" value="1">

</button>


<button class="btn btn-primary">

        <input type="radio" ng-model="color" value="2">

</button>

<button class="btn btn-primary">

        <input type="radio" ng-model="color" value="3">

</button>

How you can see I put the input inside the element button, if you have different thoughts please correct me.

Why not just check the radio by clicking on the radiobutton? — brso05
– brso05, Commented Dec 2, 2014 at 18:44
Correct, i tried to that and it works but the problem is that angular validation give me that value as required even if I checked it with Jquery prop function. — Fabrizio Fenoglio
– Fabrizio Fenoglio, Commented Dec 2, 2014 at 18:45

tymeJV · Accepted Answer · 2014-12-02 18:45:31Z

1

Set the associated ng-model equal to the value of the radio you want selected:

<button class="btn btn-primary" ng-click="color = 1">
    <input type="radio" name="radioGroup" ng-model="color" value="1">
</button>

answered Dec 2, 2014 at 18:45

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

New Dev · Accepted Answer · 2014-12-02 18:56:13Z

1

Use <label> and style it as button:

<label class="btn btn-default"> Button 1
  <input type="radio" ng-model="color" value="1">
</label>

<label class="btn btn-default"> Button 2
  <input type="radio" ng-model="color" value="2">
</label>

and add css to hide the input[type="radio"].

Not everything needs Angular.

edited Dec 2, 2014 at 18:56

answered Dec 2, 2014 at 18:47

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

2 Comments

Fabrizio Fenoglio Over a year ago

Wow, your solution is clever. I would like to accept your answer for the cleanest way to achieve it. But because is an angular related question I will accept that one above. But keep in mind I really appreciated this.

New Dev Over a year ago

@Fabrizio, when you have a hammer, every problem looks like a nail.

Collectives™ on Stack Overflow

How to check input radio from a button - AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related