23tux 23tux - 1 year ago 60
AngularJS Question

AngularJS: Select radio button by clicking on outer element

I have the following code inside an angularjs app:

<div class="radio input-group-addon">
<label>
<input type="radio" name="radio1" value="foobar" ng-model="myModel" />
my label
</span>
</div>


The outer div is 100% with a background color. Now I want to be able to make the whole area (the whole div container) clickable. I tried it with an
ng-click
handler on the div like this:

<div class="radio input-group-addon" ng-click="selectRadio($event)">
<label>
<input type="radio" name="radio1" value="foobar" ng-model="myModel" />
my label
</span>
</div>


The
selectRadio($event)
method looks like this:

$scope.selectRadio = function($event) {
var radio = $(event.currentTarget).find("input[type='radio']");
radio.prop("checked", true);
radio.trigger("change");
}


Unfortunately, this doesn't trigger a change on
myModel
. Is there a way to trigger a "model-bind-change" event (don't know the right term to discribe this), to update the model of my radio button?

And furthermore I was wondering, if there is a more angular-way to achieve this?

Answer Source

Something like this should solve it:

<div class="radio input-group-addon" ng-click="myModel = 'foobar'">
  <label>
    <input type="radio" name="radio1" value="foobar" ng-model="myModel" />
    my label
  </label>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download