AngularJS:单击外部元素选择单选按钮

时间:2014-03-18 12:43:18

标签: javascript jquery angularjs

我在angularjs app中有以下代码:

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

外部div为100%,背景色。现在我希望能够使整个区域(整个div容器)可以点击。我尝试在div上使用ng-click处理程序,如下所示:

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

selectRadio($event)方法如下所示:

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

不幸的是,这不会触发myModel的更改。有没有办法触发“模型绑定更改”事件(不知道正确的术语来描述这个),更新单选按钮的模型?

而且我想知道,如果有更多的角度方式来实现这个目标吗?

4 个答案:

答案 0 :(得分:6)

这样的事情应该解决它:

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

答案 1 :(得分:3)

由于您的input模型具有与范围变量的双向绑定,因此您应该能够在函数内设置它:

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

答案 2 :(得分:1)

我为它创建了一个小指令,它可能不是最佳答案,但它解决了问题

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');



            });
        }
    }
});

您可以在标签标签

中使用此指令

答案 3 :(得分:0)

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

<强>控制器

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