问题描述:
在AngularJS应用程序中,使用ng-model指令绑定单选按钮,但是当点击单选按钮时,按钮不会被选中。
原因:
通常这种情况发生在使用了ng-repeat指令动态生成单选按钮组时。
使用以下方法可以解决此问题:
添加ng-value指令到每个单选按钮中
将ng-model绑定到单选按钮组中的一个变量
使用ng-click指令绑定选中单选按钮的函数
下面是一些示例代码:
HTML:
JS:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) { $scope.items = [ {id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}, {id: 3, name: 'Item 3'} ];
$scope.onItemSelected = function() {
console.log($scope.selectedItem);
}
});
在以上示例中,ng-value指令指定每个单选按钮的值为其id,ng-model指令绑定整个单选按钮组中的selectedItem变量,ng-click指令绑定onItemSelected函数,该函数在每次单选按钮选中时被调用,并在控制台中打印selectedItem变量的值。