以下是一个使用AngularJS实现在选择单选按钮时显示/隐藏表格行的示例:
HTML代码:
显示第一行
显示第二行
显示第三行
Name
Email
Phone
{{row.name}}
{{row.email}}
{{row.phone}}
JavaScript代码:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.rows = [
{ name: 'John Doe', email: 'john.doe@example.com', phone: '1234567890', visible: false },
{ name: 'Jane Smith', email: 'jane.smith@example.com', phone: '0987654321', visible: false },
{ name: 'Bob Johnson', email: 'bob.johnson@example.com', phone: '9876543210', visible: false }
];
$scope.toggleRow = function() {
angular.forEach($scope.rows, function(row) {
row.visible = (row.name === $scope.selectedRow);
});
};
});
这个示例中,我们使用ng-repeat指令来重复显示行,并使用ng-show指令设置每行的可见性。通过ng-model和ng-change指令,我们可以在选择单选按钮时更新$scope.selectedRow的值,并在toggleRow函数中根据选定的行来设置行的可见性。