blocks|key|126052|text|尝试将ng-click属性添加到单选按钮输入。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|126053|首先要感谢Manny+D注意到这一点。是的，这是有点老土，但它是有效的。例如，|126054|<input+type="radio"+
+++++++name="groupName"++
+++++++ng-model="editObject.Property"+++++++++++++++++++++++++++++
+++++++ng-value="someValue"
+++++++ng-click+/>|code-block|syntax|javascript|126055|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try adding the ng-click attribute to your radio button input.

Credit to Manny D for noting this first. Yes, this is a little hackish, but it works. E.g.,

<pre><code>&lt;input type="radio" 
 name="groupName" 
 ng-model="editObject.Property" 
 ng-value="someValue"
 ng-click /&gt;
</code></pre>

blocks|key|343850|text|我遇到这个问题是因为我的一位同事复制了同一页中的单选按钮，并将它们隐藏起来以供临时参考，因此重复使用相同名称的单选输入|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343851|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I had this problem because a colleague had copied the radio buttons in the same page and hidden them for temporary reference, so duplicate radio inputs with the same name

blocks|key|343698|text|这是中断的原因-因为您将所有单选框设置为必需。因此，根据你如何编写它-+angularjs是说它是无效的，因为在某些时候并没有选择所有的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343699|解决这个问题的方法是做一些类似以下的事情：|343700|Using+checkboxes+and+required+with+AngularJS|offset|length|343701|(检查第一个和第二个答案)。这将解决您的问题。|343702|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/13567235/using-checkboxes-and-required-with-angularjs^0|0|0|0|18|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

The reason why this is breaking - is because you're setting all radio boxes to be required. As a result, depending on how you write it - angularjs is saying it's invalid because not all have been selected at some point. 

The way around this is to do something like the following:

<a href="https://stackoverflow.com/questions/13567235/using-checkboxes-and-required-with-angularjs">Using checkboxes and required with AngularJS</a>

(check the 1st and 2nd answers). This will resolve your problem.

blocks|key|125954|text|看起来像是AngularJS+1.0.3+$scope.$apply更新的问题。在1.0.2中测试了你的小提琴(你自己看看)，它也按照你期望的方式工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|125955|您的代码似乎没有什么问题，只是$scope.$apply(或$digest)在第一次选择时没有像预期的那样工作。|125956|一个非常简单的解决方法是强制$scope在每次选择时也进行更新，尝试更改表单中的以下代码行：|125957|Favorite+Beatle|code-block|syntax|javascript|125958|也改变它：|125959|Favorite+Beatle:+{{name}}|125960|您将看到myForm.$invalid是如何在第一次单击之后被更新的。|125961|我会用最新的AngularJs版本尝试一下，让我们知道在那里是否也会发生这种情况。我能想到的另一个解决方案是设置默认的选定单选框，这将导致myForm.$invalid从一开始就为false。您可以通过在控制器代码中添加以下行来完成此操作：|125962|$scope.name+=+"John";|125963|或任何您想要的默认名称。|125964|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|H|7|16|8|@]|9|@]|A|$I|J]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

Seems like an AngularJS 1.0.3 $scope.$apply update problem.
Tested your exact Fiddle in 1.0.2 (check it out yourself) and it works the way you expect it too.

It doesn't seem like there's anything wrong with your code, just that $scope.$apply(or $digest) isn't working as expected on the first select.

A very simple fix is to force the $scope to also update on every select, try changing the following line of code in your form:

<pre><code>&lt;p&gt;Favorite Beatle&lt;/p&gt;
</code></pre>

change it too:

<pre><code>&lt;p&gt;Favorite Beatle: {{name}}&lt;/p&gt;
</code></pre>

And you will see how myForm.$invalid is updated even after the first click.

I would try it out with the latest AngularJs version and let us know if that happens there too.
Another solution I can think of it setting the default selected radio, which will cause myForm.$invalid to be false from the beginning. you can do this by adding the following line in your controller code:

<pre><code>$scope.name = "John";
</code></pre>

or any default name you want.

blocks|key|125985|text|有时，$digest循环不使用$apply(fn)，因为您有两个或更多的实例。为了解决这个问题，你需要手动$apply这个技巧，所以把它放在你的指令中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|125986|angular.('myApp',[])
.directive('ngRadioExtend',+['$rootScope',+function($rootScope){
++++++++return+{
++++++++++++require:+'ngModel',
++++++++++++restrict:+'A',
++++++++++++link:+function(scope,+iElm,+iAttrs,+controller)+{
++++++++++++++++iElm.bind('click',+function(){
++++++++++++++++++++$rootScope.$$phase+%7C%7C+$rootScope.$apply()
++++++++++++++++});
++++++++++++}
++++++++};
++++}])|code-block|syntax|javascript|125987|并将其用作：|125988|<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>|125989|这才是正确的方式！|125990|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Some times the $digest cycle dosen't $apply(fn) because you have two o more instances.
For fix this you need $apply this trick manually, so put this in your directives:

<pre><code>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()
 });
 }
 };
 }])
</code></pre>

and use it as:

<pre><code>&lt;input type="radio" name="input_name" ng-model="some" value="F" ng-required="true" ng-radio-extend&gt;

&lt;input type="radio" name="input_name" ng-model="some" value="M" ng-required="true" ng-radio-extend&gt;
</code></pre>

DONE it's the correct way!

blocks|key|343753|text|1.1.5版本中仍然存在作用域未更新的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343754|一种简单的解决方法是只添加<span+ng-show="false">+{{name}}+|offset|length|style|CODE|343755|小提琴：http://jsfiddle.net/jonyschak/xaQJH/|343756|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jonyschak/xaQJH/^0|0|D|13|0|4|10|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

The problem of the scope not getting updated still occurs in 1.1.5

A simple work around is to just add
 <code>&lt;span ng-show="false"&gt; {{name}} &lt;/span&gt;</code>

Fiddle: <a href="http://jsfiddle.net/jonyschak/xaQJH/" rel="nofollow">http://jsfiddle.net/jonyschak/xaQJH/</a>

blocks|key|126143|text|对于离子v1，添加name=""以防止离子自动生成属性name。然后，我只需单击一次即可更改所选项目。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|126144|<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>|code-block|syntax|javascript|126145|entityMap^0|9|7|R|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

For IONIC v1,
add <code>name=""</code> to prevent ionic auto-generate attribute <code>name</code>.
Then, I can change the selected item with only one click.

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

I have a very simple form where a radio button is required to be selected in order for a form to be valid. The radio buttons are generated by <code>ngRepeat</code>.

As you can see from this fiddle, while the desired behavior is that when the radio button is clicked for the first time, that should validate the form (being the only element), however notice that it takes an additional click (on the same radio button or any other) to validate the form:

<a href="http://jsfiddle.net/Xsk5X/3/" rel="noreferrer">http://jsfiddle.net/Xsk5X/3/</a>

What am I missing?

AngularJS required radio buttons needs two click events to be valid

我有一个非常简单的表单，其中需要选择一个单选按钮才能使表单有效。单选按钮由ngRepeat生成。正如您从这个小提琴中看到的，虽然所需的行为是当第一次单击单选按钮时，这应该验证表单(作为唯一的元素)，但是请注意，它需要额外的单击(在相同的单选按钮或任何其他单选按钮上)来验证表单：我遗漏了什么？

问AngularJS必需单选按钮需要两个单击事件才能生效
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS必需单选按钮需要两个单击事件才能生效EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS必需单选按钮需要两个单击事件才能生效
EN