Question

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

正如你可以从这个小提琴中看到的那样，虽然所希望的行为是当第一次点击单选按钮时，它应该验证表单（作为唯一的元素），但是请注意它需要额外的点击（打开相同的单选按钮或任何其他）以验证表单：

http://jsfiddle.net/Xsk5X/3/

我错过了什么？

Answer 1

所有其他解决方案都是解决方法：当您使用{0}}属性时，您只需删除name属性即可需要它，他们发生冲突。

指定ng-model会导致Angular混淆，因为它会为角度模型更改一次值，而另一次更改表单元素名称。

Answer 2

我遇到了这个问题，因为一位同事在同一页面中复制了单选按钮并将其隐藏起来供临时参考，因此重复使用相同名称的无线电输入

Answer 3

之所以破坏 - 是因为您要设置所有无线电盒。结果，取决于你如何写它 - angularjs说它是无效的，因为并非所有都在某个时候被选中。

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

Using checkboxes and required with AngularJS

（查看第1和第2个答案）。这将解决您的问题。

Answer 4

看起来像AngularJS 1.0.3 $ scope。$ apply update problem。在1.0.2中测试你的确切小提琴（自己检查一下），它的工作方式也是你预期的。

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

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

<p>Favorite Beatle</p>

也改变它：

<p>Favorite Beatle: {{name}}</p>

即使首次点击，您也会看到myForm。$ invalid的更新方式。

我会尝试使用最新的AngularJs版本，并告诉我们是否也会发生这种情况。另一种解决方案我可以想到它设置默认选择的无线电，这将导致myForm。$ invalid从一开始就是假的。您可以通过在控制器代码中添加以下行来执行此操作：

$scope.name = "John";

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

Answer 5

有时候$ 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>

完成它是正确的方法！

Answer 6

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

归功于曼尼D首先注意到这一点。是的，这有点hackish，但它的确有效。如，

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

Answer 7

范围未更新的问题仍然发生在1.1.5

中

一个简单的解决方法就是添加 <span ng-show="false"> {{name}} </span>

小提琴：http://jsfiddle.net/jonyschak/xaQJH/

Answer 8

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

AngularJS所需的单选按钮需要两个单击事件才有效

8 个答案: