javascript - AngularJS: Select radio button by clicking on outer element - Stack Overflow

admin管理员组

文章数量:1244315

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?

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?

• javascript
• jquery
• angularjs

Share Improve this question Follow asked Mar 18, 2014 at 12:43 23tux23tux 14.7k1616 gold badges9696 silver badges194194 bronze badges 1

• why don't you use just html+css to style the label element which should be linked to your input : <label for="myid"><input id="myid" /></label> ? – Jscti Commented Mar 18, 2014 at 12:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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>

Since your input model has a two-way-binding to your scope variable you should be able to set it inside your function:

$scope.selectRadio = function($event) {
    scope.myModel = 'foobar';
}

I have created a small directive for it, It might not be the best answer but it solves the problem

Common.directive('radiobtn',function(){
    return {
        link:function(scope,elem,attr){
            var value=attr['radiobtn'];
            var radio=elem.find('input[type=radio]').first()
            if(radio.val()==value){
                elem.addClass('active');
            }
            radio.click(function(e) {
               //do something
               e.stopPropagation();
            })
            elem.on('click',function(event){
                //elem.addClass('active');
                radio.prop("checked", true);
                radio.trigger('click');



            });
        }
    }
});

You can use this directive in the label tag

HTML

<div ng-repeat="item in $scope.items track by $index" ng-click="$scope.SelectRadio($index)">
    <input type="radio" name="radio1" ng-checked="$scope.clicked == $index" />
</div>

Controller

$scope.SelectRadio = function (rowIndex) {
    $scope.clicked = rowIndex;
}

本文标签： javascriptAngularJS Select radio button by clicking on outer elementStack Overflow