我在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
的更改。有没有办法触发“模型绑定更改”事件(不知道正确的术语来描述这个),更新单选按钮的模型?
而且我想知道,如果有更多的角度方式来实现这个目标吗?
答案 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;
}