【Angular】radio选项如何确定是否选中,唯一性选中

在单选题的4个选项中,要保证1个为true,其它3个选项为false;这里用的radio属性;

<input type='radio'>

radio是收音机的意思,老式收音机,按下一个按钮后,其它的按钮都会弹上来,所以很形象的用radio来作为type的值;表示唯一性,排他性选中;

但是在我的页面,只要我鼠标点击过的选项,都会被设置成true;就是说,虽然,浏览器页面看到的是,一个选中,其它三个没选中,但是在js逻辑层,只要选中过(注意过字!!)的,都会变成true;这里讲一下手动处理方法,处理方法:

1、【浏览器显示页面】:
这里写图片描述
但是js逻辑里,实际上不是这样的,只要我点击过的选项都是true;这里写了一个点击事件;

【源代码】:

<label class="m-b-none" ng-if="q.type==='radio'||q.type==='tf'">
    <input type="radio"  id="radio" name="choices" ng-model="choice.correct" ng-checked="checked" ng-click="getExclusiveness($index)" ng-value="true"> 正确
</label>

2、【html页面】:
这里写图片描述

3、【js页面代码】:
这里写图片描述

【源代码】:

    $scope.getExclusiveness=function($index) {
        if ('radio'===$scope.q.type) {
            var cbk = document.getElementById('radio');
            console.log(cbk);
            console.log($scope.q.choices);
            console.log("$index:" + $index);
                //把选中项设置为true,把其它项设置为false;
                $scope.q.choices[$index].correct =true;
                for (var i=0;i<$scope.q.choices.length;i++) {
                    if (i != $index) {
                        $scope.q.choices[i].correct = false;
                        console.log("i:" + i);
                        console.log($scope.q.choices[i].correct);
                    }
                }
                alert('复选框将选中!');
        }else if('check'===$scope.q.type) {
        }
    };

4、【浏览器控制台】
打印信息,打印内容跟js页面:

这里写图片描述

Angular中,单选按钮(radio buttons)通常用于在一组选项中选择一个选项。你可以使用ngModel指令来实现单选按钮的绑定和双向数据绑定。根据提供的引用内容,我可以看出有三种使用ngModel绑定单选按钮的方式。 引用中展示了一种使用[(ngModel)]属性绑定单选按钮的方式。每个单选按钮都有一个相同的name属性,通过[(ngModel)]绑定到变量line上。其中,为"shengwang"和"zhongchuang"的单选按钮分别代表声网和中创。这种方式可以实现双向数据绑定,即当用户选择了一个选项时,line变量的会自动更新。 引用中展示了一种简单的单选按钮示例,其中只使用了name和value属性。name属性仍然相同,而value属性分别为"shengwang"和"zhongchuang"。这种方式不使用ngModel,因此不具备双向数据绑定的功能。 引用中介绍了使用ngModel和ngModelChange事件的方法。ngModel绑定了变量line的,ngModelChange事件在选项发生变化时触发,并将新的作为参数传递给on函数。这种方式可以实现在选择单选按钮时执行一些自定义的逻辑。 所以,以上是在Angular中使用ngModel绑定单选按钮的几种方式。你可以根据自己的需求选择其中一种来实现单选按钮的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [关于angularradio单选的问题](https://blog.csdn.net/ping_lvy/article/details/114699864)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶洲川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值