以下是一个使用AngularJS实现根据第一列的下拉菜单显示/隐藏表格列的示例代码:
HTML部分:
第一列
列1
列2
列3
{{item.column1}}
{{item.column2}}
{{item.column3}}
JavaScript部分:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [
{ column: '', column1: '值1', column2: '值2', column3: '值3' },
{ column: '', column1: '值4', column2: '值5', column3: '值6' },
{ column: '', column1: '值7', column2: '值8', column3: '值9' }
];
$scope.updateColumns = function() {
$scope.showColumn1 = false;
$scope.showColumn2 = false;
$scope.showColumn3 = false;
angular.forEach($scope.items, function(item) {
if (item.column === 'column1') {
$scope.showColumn1 = true;
}
if (item.column === 'column2') {
$scope.showColumn2 = true;
}
if (item.column === 'column3') {
$scope.showColumn3 = true;
}
});
};
});
在这个示例中,我们使用ng-show指令根据$scope中的变量来控制列的显示和隐藏。当下拉菜单的值发生变化时,我们调用updateColumns函数来更新$scope中的变量,然后根据这些变量来显示或隐藏相应的列。