I have a specific requirement where I need to display and hide the description of each column in a table when a button is clicked. Here is the visual representation of what I have: the table
In my HTML code, I have defined a button with ng-click as a function that takes a parameter to determine the visibility of the columns.
However, when I click the button, nothing happens. Can someone please help me understand why?
Here's a snippet of my HTML code:
<table>
<tr>
<td><strong>Data</strong></td>
<td><strong>tempmin</strong></td>
<td><strong>tempmax</strong></td>
<td><strong>umiditatea</strong></td>
<td><strong>presiunea</strong></td>
<td><strong>vitezavint</strong></td>
<td><strong>nori</strong></td>
</tr>
<tr ng-repeat="md in chisinau.list">
<td class='td'><span ng-show='buton0'>
{{md.dt * 1000 | date:"MM.dd"}}</span></td>
<td class='td'><span ng-show='buton1'>
{{md.temp.min}}</span></td>
<td class='td'><span ng-show='buton2'>
{{md.temp.max}}</span></td>
<td class='td'><span ng-show='buton3'>
{{md.humidity}}%</span></td>
<td class='td'><span ng-show='buton4'>
{{md.pressure}}</span></td>
<td class='td'><span ng-show='buton5'>
{{md.speed}}</span></td>
<td class='td'><span ng-show='buton6'>
{{md.clouds}}</span></td>
</tr>
<tr>
<td ng-repeat='buton in butoane track by $index'>
<button ng-click="fbuton('buton'+$index)">{{buton}}</button>
</td>
</tr>
Here's a snippet of my controller.js file:
$http.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=Chisinau&mode=json&units=metric&cnt=10&appid=6fa04faec9c89ba8cf92dd1f76e7d518')
.success(function(response){
$scope.chisinau = response;
});
$scope.butoane = [
'buton-data',
'buton-tempmin',
'buton-tempmax',
'buton-umidiatea',
'buton-presiunea',
'buton-vitezavint',
'buton-nori'
];
$scope.buton0 = true;
$scope.buton1 = true;
$scope.buton2 = true;
$scope.buton3 = true;
$scope.buton4 = true;
$scope.buton5 = true;
$scope.buton6 = true;
$scope.fbuton = function(x){
$scope.x = $scope.x == true ? false : true;
}