AngularJS必需单选按钮需要两次单击事件才能有效

我有一个非常简单的表单，其中需要选择单选按钮才能使表单有效。单选按钮由

ngRepeat

生成

正如您从这把小提琴中看到的，虽然期望的行为是第一次单击单选按钮时，应该验证表单（是唯一的元素），但是请注意，需要额外单击（在同一单选按钮或任何其他按钮上）来验证表单：

---

我遗漏了什么？

之所以会出现这种情况，是因为您将所有的收音机盒都设置为必需的。因此，根据您编写它的方式，angularjs会说它无效，因为在某个点上并不是所有的都被选中

解决此问题的方法是执行以下操作：

---

（检查第一和第二个答案）。这将解决您的问题。

似乎是AngularJS 1.0.3$范围。$应用更新问题。 在1.0.2中测试了你的精确小提琴（你自己检查一下），它也按照你期望的方式工作

您的代码似乎没有任何问题，只是$scope.$apply（或$digest）在第一次选择时没有按预期工作

一个非常简单的修复方法是强制$scope也在每次选择时更新，尝试更改表单中的以下代码行：

<p>Favorite Beatle</p>

---

或者任何您想要的默认名称。

有时$digest循环不适用于$apply（fn），因为您还有两个或多个实例。 要解决此问题，您需要$手动应用此技巧，因此请将其放在指令中：

angular.('myApp',[])
.directive('ngRadioExtend', ['$rootScope', function($rootScope){
        return {
            require: 'ngModel',
            restrict: 'A',
            link: function(scope, iElm, iAttrs, controller) {
                iElm.bind('click', function(){
                    $rootScope.$$phase || $rootScope.$apply()
                });
            }
        };
    }])

并将其用作：

<input type="radio" name="input_name" ng-model="some" value="F" ng-required="true" ng-radio-extend>

<input type="radio" name="input_name" ng-model="some" value="M" ng-required="true" ng-radio-extend>

---

这样做是正确的

1.1.5中仍然存在范围未更新的问题

一个简单的解决方法就是添加

{{name}}

---

Fiddle:

尝试将ng click属性添加到单选按钮输入中

首先要感谢Manny D注意到这一点。是的，这有点老套，但很管用。例如：

<input type="radio" 
       name="groupName"  
       ng-model="editObject.Property"                             
       ng-value="someValue"
       ng-click />

我遇到了这个问题，因为一位同事复制了同一页面中的单选按钮并将其隐藏起来以供临时参考，因此使用相同名称复制单选输入所有其他解决方案都是可行的：您只需删除

名称
属性，当您使用
ng model
属性时，您不需要它，它们会发生冲突

指定
名称
会导致Angular混淆，因为它会更改Angular模型的值一次，更改表单元素名称的值一次。
对于IONIC v1，
添加
name=”“
以防止离子自动生成属性
name
。
然后，我只需单击一次即可更改所选项目

<ion-radio class="label-ticket" 
    ng-repeat="topic in vm.listTopic track by $index"
    ng-value="topic"
    ng-model="vm.topicSupport"
    name="">
    {{ topic.title }}
</ion-radio>


{{topic.title}}
如果看看@ArunPJohny Yep，它会变得更疯狂，几乎就好像需要一些视图绑定来“解决”验证状态。这适用于angular 1.0.2和brakes 1.0.3。由于有相当多的变化可能导致这种情况，我建议您打开一个。这似乎更像是一种黑客行为，但如果您在输入中添加
ng click=“”
，似乎会强制进行摘要并更新您的表单：@PaulSmith您能将Preston Badeer的答案标记为正确的吗？这是正确的解决方案，我刚刚验证过。这也是得票最多的答案。丹尼尔的回答可能有用，但这是一个错误。谢谢另外-尝试更新angularjs。他们现在已经升级到了1.0.5，所以可能值得更新，看看现在是否有更简单的解决方案。这对我来说不起作用，我不需要任何收音机盒，但仍然存在这个问题。Tbh，这已经超过2年了。它可能不再适用。Angular JS从那以后有了很大的发展（我相信在撰写本文时它是0.8）。我想我找到了最新版本的修复方法，并在混合中添加了我的答案。请参阅上面的评论；）这个很好用！只是投了赞成票。但这仍然是AngularJS应该能够自行解决的问题的解决方法。我同意你的看法，我希望能帮助别人！谢谢嗯，我只是通过将
$apply
调用包装在一个超时中来实现它：
setTimeout（function（）{$rootScope.$$phase | |$rootScope.$apply（）}）
我认为这在脏检查时间上很昂贵，但是如果没有复杂的UI，就使用$apply。简单操作的正确方法是做一些非常简单的事情：将您的范围设置为$scope.some设置为$scope.some={something:“somevalue”}；完成！不要使用
$rootScope.$$phase | |$rootScope.$apply（）
-这一直是一个黑客攻击，在最新版本中已经被弃用（将导致错误）哇，谢谢，这修复了我的问题。在文档中看不到关于此的任何信息-请查看。这对我有用。
<input type="radio" 
       name="groupName"  
       ng-model="editObject.Property"                             
       ng-value="someValue"
       ng-click />

<ion-radio class="label-ticket" 
    ng-repeat="topic in vm.listTopic track by $index"
    ng-value="topic"
    ng-model="vm.topicSupport"
    name="">
    {{ topic.title }}
</ion-radio>