CODEWITHSUNDEEP
javascriptangularjscontrollerangularjs-ng-clickng-show
Catalin
Catalin

Reputation: 258

AngularJS. ng-show, ng-click not working as pressing button

I have a table and want to show/hide the description of each column when button is pressed. What I have visually: the table

As you see in my html, I declared a button with a ng-click as a function which takes a parameter to match the ng-show.

But it doesn't do anything when button is pressed, why?

My html:

<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>

my controller.js:

    $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;

    }

Upvotes: 2

Views: 286

Answers (4)

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

Along with the answers already provided I can provide an alternate solution to you problem. I have changed the implementation a bit but it will provide the same solution that you are looking for. You can check the fiddler here.
I have changed the structure of 'butoane' and have made it into an array object of object which will contain both your button label and a boolean field which will be used to toggle the description.

Controller

$scope.butoane = [{
    label: 'buton - data ',
    show: true
  }, {
    label: 'buton - tempmin ',
    show: true
  }, {
    label: 'buton - tempmax ',
    show: true
  }, {
    label: 'buton - umidiatea ',
    show: true
  }, {
    label: 'buton - presiunea ',
    show: true
  }, {
    label: 'buton - vitezavint ',
    show: true
  }, {
    label: 'buton - nori ',
    show: true
  }];

  $scope.fbuton = function(x) {
    x.show = !x.show;
  }

HTML

<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='butoane[0].show'>
    {{md.dt * 1000 | date:"MM.dd"}}</span></td>
      <td class='td'><span ng-show='butoane[1].show'>
    {{md.temp.min}}</span></td>
      <td class='td'><span ng-show='butoane[2].show'>
    {{md.temp.max}}</span></td>
      <td class='td'><span ng-show='butoane[3].show'>
    {{md.humidity}}%</span></td>
      <td class='td'><span ng-show='butoane[4].show'>
    {{md.pressure}}</span></td>
      <td class='td'><span ng-show='butoane[5].show'>
    {{md.speed}}</span></td>
      <td class='td'><span ng-show='butoane[6].show'>
    {{md.clouds}}</span></td>
    </tr>
    <tr>
      <td ng-repeat='buton in butoane'>
        <button ng-click="fbuton(buton)">{{buton.label}}</button>
      </td>
    </tr>
  </table>

Upvotes: 1

Ajanthan Mani
Ajanthan Mani

Reputation: 509

Adding a little explanation along with @a.u.b & xwid

you passed a string to your method, and in the method, you accessed the property of the scope object x.

in order to let the scope use your variable as a property you need to use [ ]. Its a basic issue in objects.

try $scope[x] instead of $scope.x

Upvotes: 2

a.u.b
a.u.b

Reputation: 1609

Try use $scope[x] 

$scope.fbuton = function(x){
     $scope[x] = $scope[x] == true ? false : true;
}

or (i'm not sure about $eval)

$scope.fbuton = function(x){
     $scope.$eval(x) = $scope.$eval(x) == true ? false : true;
}

Upvotes: 2

Kasper Ziemianek
Kasper Ziemianek

Reputation: 1349

If You want to refer to $scope variable "x" try the following :

$scope[x] = $scope[x] == true ? false : true;

Upvotes: 2

Related Questions