18

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

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

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

我错过了什么？

4

8 回答 8

39

所有其他解决方案都是变通方法：您所要做的就是删除该name属性，当您使用ng-model不需要它的属性并且它们发生冲突时。

指定name会导致 Angular 感到困惑，因为它会更改一次 Angular 模型的值和另一次更改表单元素名称的值。

于 2015-10-23T05:47:54.207 回答
2

我遇到了这个问题，因为一位同事复制了同一页面中的单选按钮并将它们隐藏以供临时参考，因此重复具有相同名称的单选输入

于 2014-11-04T15:19:20.323 回答
1

这是破坏的原因 - 是因为您将所有单选框设置为必需。结果，取决于您如何编写它 - angularjs 说它是无效的，因为并非所有内容都在某个时候被选中。

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

使用复选框和 AngularJS 必需

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

于 2013-04-04T23:33:41.360 回答
1

似乎是 AngularJS 1.0.3 $scope.$apply 更新问题。在 1.0.2 中测试了您的确切 Fiddle（自己检查一下），它也按您期望的方式工作。

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

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

<p>Favorite Beatle</p>

也改变它：

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

即使在第一次单击之后，您也会看到 myForm.$invalid 是如何更新的。

我会尝试使用最新的 AngularJs 版本，如果那里也发生这种情况，请告诉我们。我可以想到的另一个解决方案是设置默认选择的单选，这将导致 myForm.$invalid 从一开始就为假。您可以通过在控制器代码中添加以下行来做到这一点：

$scope.name = "John";

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

于 2013-08-02T12:05:14.070 回答
1

有时 $digest 循环不会 $apply(fn) 因为您有两个或多个实例。为了解决这个问题，你需要手动 $apply 这个技巧，所以把它放在你的指令中：

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>

DONE 这是正确的方法！

于 2013-08-02T16:51:30.937 回答
1

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

感谢 Manny D 首先注意到这一点。是的，这有点骇人听闻，但它确实有效。例如，

<input type="radio" 
       name="groupName"  
       ng-model="editObject.Property"                             
       ng-value="someValue"
       ng-click />
于 2013-10-02T23:51:52.190 回答
0

1.1.5仍然出现范围不更新的问题

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

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

于 2013-08-13T22:19:00.093 回答
0

对于 IONIC v1，添加name=""以防止 ionic auto-generate 属性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>
于 2019-10-28T08:52:22.600 回答