单选按钮不会对ng-change指令做出反应
Radiobutton wont react to ng-change directive
这个问题与这个有关。
当我尝试用这些答案的建议进行实验时，我遇到了一些麻烦。我尝试做的是做同样的事情，但使用官方的angular材料示例，如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css'>
</head>
<body ng-app="radioDemo1" layout="row">
<div>
<form ng-submit="submit()" ng-controller="AppCtrl">
<div ng-repeat="c in radioData">
<md-radio-group class="choice" ng-required="true" ng-change="radioChanged(account)" ng-model="c.selectedValue" >
<md-radio-button value="Apple" class="md-primary" >Apple</md-radio-button>
<md-radio-button value="Banana" > Banana </md-radio-button>
<md-radio-button value="Mango" >Mango</md-radio-button>
</md-radio-group>
<div>
</form>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script>
'use strict';
angular
.module('radioDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.data = {
group1 : '1',
group2 : '2',
group3 : '3'
};
$scope.radioData = [
{ label: '1', value: 1 },
{ label: '2', value: 2 },
{ label: '3', value: '3', isDisabled: true },
{ label: '4', value: '4' }
];
$scope.radioChanged = function (item) {
console.log(item);
if (item.selectedValue == "Apple") {
$scope.admin = item;
}
else if (item == $scope.admin) {
$scope.admin = undefined;
}
};
})
</script>
</body>
</html>
这段代码的问题是，用于检查所选单选按钮值的函数永远不会被调用。
为什么会这样，我如何解决这个问题，以便执行检查?
似乎ng-model和ng-change只允许出现在md-radio-group元素中。
也如overburn所说，你在使用md-model时也必须小心。
因此，这个问题的解决方案是:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css'>
</head>
<body ng-app="radioDemo1" layout="row">
<div>
<form ng-submit="submit()" ng-controller="AppCtrl">
<div ng-repeat="c in radioData">
<md-radio-group class="choice" ng-required="true" ng-change="radioChanged(c)" ng-model="c.selectedValue" >
<md-radio-button value="Apple" class="md-primary" ng-disabled="admin && item != admin">Apple</md-radio-button>
<md-radio-button value="Banana" > Banana </md-radio-button>
<md-radio-button value="Mango" >Mango</md-radio-button>
</md-radio-group>
<div>
</form>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script>
'use strict';
angular
.module('radioDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.data = {
group1 : '1',
group2 : '2',
group3 : '3'
};
$scope.radioData = [
{ label: '1', value: 1 },
{ label: '2', value: 2 },
{ label: '3', value: '3', isDisabled: true },
{ label: '4', value: '4' }
];
$scope.radioChanged = function (item) {
console.log(item);
if (item.selectedValue == "Apple") {
$scope.admin = item;
}
else if (item == $scope.admin) {
$scope.admin = undefined;
}
};
})
</script>
</body>
</html>
你应该在所有的单选按钮上使用相同的模型。
单选按钮基本上是一个值数组，所以如果你把不同的模型放在它们上面，它们实际上不会改变，因为它们每个只有一个可能的值。
试题:
<md-radio-group class="choice">
<md-radio-button ng-model="data.group_unique" value="Apple" class="md-primary" ng-change="radioChanged(account)">Apple</md-radio-button>
<md-radio-button ng-model="data.group_unique" value="Banana" ng-change="radioChanged(account)"> Banana </md-radio-button>
<md-radio-button ng-model="data.group_unique" value="Mango" ng-change="radioChanged(account)">Mango</md-radio-button>
</md-radio-group>
相关文章：
- 为什么“ng checked”不适用于“ng change”
- 使用 ng-change 对输入类型数据进行 JavaScript 取消事件
- Angularjs slider with ng-change
- 从服务器获取数据，并使用$http服务和ng-change在select事件上显示它
- AngularJS自定义指令ng显示/ng隐藏
- ng-change不适用于ng选项
- 如何在AngularJS ng-click(或ng-change，..）中调用服务函数
- 何时在 Angularjs 中使用 $watch 或 ng-change
- 组件类型角度指令 ng 模板
- ng-change在我的指令中不适用于选择
- 重新编译角度指令以编程方式添加 ng-module 和 ng-change
- Angularjs (ng-click， ng-change） 指令不适用于 icheck 插件
- 在IE9和ie10中，angularjs的ng-change不会触发ng-model-onblur指令
- 在Angularjs中使用指令触发ng-change
- 将ng-change应用于一个，该文件已经使用了它自己的指令
- Ng-change和custom指令在初始化时使作用域变量未定义
- 单选按钮不会对ng-change指令做出反应
- 选择自定义指令和ng-change
- 如何在自定义指令中包装 ng-change
- 使用双向绑定和ng-change的AngularJS指令
