ng-checked 和 ng-change 单选按钮不能一起工作 - angularjs [英] ng-checked and ng-change radio button not work together - angularjs
问题描述
http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview
js
angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {$scope.radii = [{id:.25,checked:false, name:"1/4 Mile"},{id:.5, 检查:false, name:"1/2 Mile"},{id:1, 检查:false, name:"1 Mile"},{id:2, 检查:true, name:"2 Mile"},{id:3, 检查:false, name:"3 Mile"},{id:4, 检查:false, name:"4 Mile"},{id:5, 检查:false, name:"5 Mile"}];$scope.handleRadioClick = function(){警报();};});
和 html
<标签><input type="radio" name="radius"ng-change="handleRadioClick()"ng-checked="radius.checked">{{radius.name}}标签>
注意2 英里"无线电输入是根据半径范围结构检查的.为什么ng-change没有触发功能?
如果我添加 ng-model,函数会触发,但 ng-checked 不起作用.
这是因为你没有使用 ng-model
:
<标签><input type="radio" name="radius"ng-change="handleRadioClick(selectedRadius)"ng-model="radius.checked">{{radius.name}}标签>
更新:
很抱歉,我没有注意到您想要选中默认单选按钮,如果是这种情况,那么您采用的方法是不正确的.您必须将模型视为一组单选按钮中的非单个部分,但作为一个整体,它们应该是一个值.您不必使用 ng-repeat
的无线电作用域变量,而是使用另一个 ng-model
作为 selectedRadius
模型.您的输入单选需要有一个值,在这种情况下,我们将使用 ng-value
来确定模型的当前值.
更新 PLUNKER [2014 年 9 月]
JAVASCRIPT
控制器
$scope.radii = [{id:.25, name:"1/4 Mile"},{id:.5, name:"1/2 Mile"},{id:1, name:"1 Mile"},{id:2, name:"2 Mile"},{id:3, name:"3 Mile"},{id:4, name:"4 Mile"},{id:5, name:"5 Mile"}];//选择的值为 {id:2, name:"2 Mile"}$scope.selectedRadius = $scope.radii[3];
HTML
<标签><input type="radio" name="radius"ng-change="handleRadioClick(radius)"ng-model="selectedRadius"ng-value="半径">{{radius.name}}标签>
更新的 PLUNKER [2015 年 1 月]
下面的dcz.switcher 问题表明,当重新选择单选按钮时,上述解决方案不会触发 ng-change
事件处理程序.主要问题是 ng-model
指的是 ng-repeat
的范围,而不是第二次更改中的控制器范围.要解决此问题,您可以使用 $parent
属性.另一种方法是使用 controllerAs
别名并使用别名本身来访问控制器的属性.要了解有关 AngularJS 中作用域的更多信息,我建议您阅读更多相关信息在这里.
HTML
<标签><input type="radio" name="radius"ng-change="handleRadioClick($parent.selectedRadius)"ng-model="$parent.selectedRadius"ng-value="半径">{{radius.name}}标签>
http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview
js
angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {
$scope.radii = [
{id:.25, checked:false, name:"1/4 Mile"},
{id:.5, checked:false, name:"1/2 Mile"},
{id:1, checked:false, name:"1 Mile"},
{id:2, checked:true, name:"2 Mile"},
{id:3, checked:false, name:"3 Mile"},
{id:4, checked:false, name:"4 Mile"},
{id:5, checked:false, name:"5 Mile"}
];
$scope.handleRadioClick = function(){
alert();
};
});
and html
<div class="radio">
<label>
<input type="radio" name="radius"
ng-change="handleRadioClick()"
ng-checked="radius.checked">
{{radius.name}}
</label>
</div>
</li>
Notice "2 Mile" radio input is checked based on the radii scope structure. Why doesn't the ng-change trigger the function?
If I add ng-model, the function triggers but the ng-checked does not work.
This is because you are not using ng-model
:
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
<label>
<input type="radio" name="radius"
ng-change="handleRadioClick(selectedRadius)"
ng-model="radius.checked">
{{radius.name}}
</label>
</div>
UPDATE:
I'm sorry that I didn't notice that you wanted to have a default radio button checked, if that is the case then the approach you're taking is incorrect. You must consider the model as non-individual parts in a group of radio buttons but as a whole, they are supposed to be one value instead. You don't have to use ng-repeat
's radio scope variable instead use another ng-model
as the selectedRadius
model. Your input radio needs to have a value, and in this case we'll use ng-value
to determine the current value of the model.
UPDATED PLUNKER [2014 September]
JAVASCRIPT
Controller
$scope.radii = [
{id:.25, name:"1/4 Mile"},
{id:.5, name:"1/2 Mile"},
{id:1, name:"1 Mile"},
{id:2, name:"2 Mile"},
{id:3, name:"3 Mile"},
{id:4, name:"4 Mile"},
{id:5, name:"5 Mile"}
];
// selected value is {id:2, name:"2 Mile"}
$scope.selectedRadius = $scope.radii[3];
HTML
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
<label>
<input type="radio" name="radius"
ng-change="handleRadioClick(radius)"
ng-model="selectedRadius"
ng-value="radius">
{{radius.name}}
</label>
</div>
UPDATED PLUNKER [2015 January]
dcz.switcher's problem below suggested that the solution above does not trigger the ng-change
event handler when a radio button is reselected. The main problem was that the ng-model
was referring to the ng-repeat
's scope and not to the controller's scope from the second change. To solve this problem you can use the $parent
property. An alternative would be to use controllerAs
alias and use the alias itself to access your controller's property. To understand more about scopes in AngularJS, I suggest you read more about it in here.
HTML
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
<label>
<input type="radio" name="radius"
ng-change="handleRadioClick($parent.selectedRadius)"
ng-model="$parent.selectedRadius"
ng-value="radius">
{{radius.name}}
</label>
</div>
这篇关于ng-checked 和 ng-change 单选按钮不能一起工作 - angularjs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!