AngularJS:通过点击外部元素选择单选按钮
AngularJS: Select radio button by clicking on outer element
我在angularjs应用程序中有以下代码:
<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
上的变化。是否有一种方法可以触发"model-bind-change"事件(不知道如何描述)来更新我的单选按钮的模型?
此外,我想知道,如果有一个更角度的方式来实现这一点?
这样做应该可以解决这个问题:
<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>
因为你的input
模型有一个双向绑定到你的作用域变量,你应该能够在你的函数中设置它:
$scope.selectRadio = function($event) {
scope.myModel = 'foobar';
}
我已经为它创建了一个小指令,它可能不是最好的答案,但它解决了问题
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');
});
}
}
});
你可以在标签标签
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;
}
相关文章:
- 如何使内部元素具有位置:绝对覆盖溢出:隐藏外部元素
- jQuery 单击外部元素可向上或向下移动包含选中复选框的无序列表项
- 从 javascript 中的选择中获取强大的外部元素
- 根据 c3 条形图中的坐标对齐外部元素
- 使用 jquery 删除外部元素
- 影响当前外部元素中的另一个元素
- 如何使用Jquery删除xml中的外部元素
- Angular指令,将click事件绑定到外部元素不起作用
- fullcalendar中删除的外部元素的结束时间没有'拖动到新位置之前不应用
- 如何在JavaScript中获取外部元素值
- 如何添加一个外部元素日期块的3天拖动n'用全压延机落下
- 如何禁用外部元素中的滚动
- 如何在FullCalendar中使用外部元素获取drop和eventDrop的结束时间
- 如何在外部元素掉落的基础上更改背景颜色's id:完整日历
- 如何使用CSS或JavaScript使内部元素在固定的外部元素中滚动
- 是否可以禁用外部元素上的滚动并保持内部元素上的滑动
- 获取外部元素的html
- 将变量传递给Google Maps事件对象.(谷歌地图多边形,外部元素悬停)
- 是否可以通过jQuery.load()加载外部元素后滚动到锚点
- 单击外部元素- JQuery