CODEWITHSUNDEEP
htmlangularjs
Lee Lee
Lee Lee

Reputation: 583

How to show specific element in table cells using angularjs

Based on my searches when you want to hide the visibility of element in html using angularjs just used ng-show or ng-hide. In my page I have a table generated using ng-repeat.Each row have a button "show check". When the button is clicked the word "CHECK" should display beside the ID. Ng-show is working fine except when I clicked the button in the row with ID 1 all the rows display CHECK the, CHECK word should be display only in a row where I have click the button. What is missing? I try to passed the key parameter but it's not work. Any advice and suggestions would be appreciated. Thanks

My fiddle is : https://jsfiddle.net/DharkRoses/wydyagao/

I used this code so far: 

$scope.myVar = true;
$scope.toggleShow = function(key){
  alert(key);
  $scope.myVar =!$scope.myVar;
};

Upvotes: 0

Views: 1703

Answers (1)

Rebornix
Rebornix

Reputation: 5270

You should add myVar for each user in the ng-repeat list.

<tr ng-repeat="user in users">
            <td><p ng-show ="user.myVar">CHECK</p>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.stat}}</td>
            <td><button id ="btn" ng-click = "toggleShow(user)">show check</button>                  </td>
</tr>

Then in your controller

$scope.toggleShow = function(user){
  alert(user.myVar);
  user.myVar =!user.myVar;
};

Upvotes: 1

Related Questions