CODEWITHSUNDEEP
htmlangularjs
Lee Lee
Lee Lee

Reputation: 583

ng-hide and ng-show in ng-repeat html table angularjs

I have my table in html view generated using ng-repeat. In table when I click the "show check" button in certain ID row for example 1 the "CHECK" word should be visible beside the id number 1 and when I click 2 the "CHECK" word should be visible beside the id number 2 and the word "CHECK" in number 1 should be remove or invisible. I am using ng-repeat in table. It's almost working fine except when I click button 2 times the other "CHECK" word is still visible which should not. Any help would be much appreciated. Thanks

This is my fiddle: http://jsfiddle.net/DharkRoses/onao6ddn/

Sample code:

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

Upvotes: 0

Views: 1770

Answers (3)

Vinodh Thangavel
Vinodh Thangavel

Reputation: 51

Simple solution:

backup the user while toggling the myvar and then use it .

 previousUser={};
$scope.myVar = true;
$scope.toggleShow = function(user){
    previousUser.myVar=false;
    previousUser=user;
  user.myVar =!user.myVar;

};

Upvotes: 1

squiroid
squiroid

Reputation: 14017

Use $index Fiddle

$scope.toggleShow = function(user,$index){
    for(var i=0;i<$scope.users.length;i++){
        $scope.users[i].myVar='false'
    }
    $scope.users[$index].myVar='true'
};


   <td><button id ="btn" ng-click = "toggleShow(user,$index)">show check</button></td>

Users data little modified :-
 $scope.users = [ 
       {
          id:1,
          name:'Mary Land',
          stat:51,
          myVar:'false'
        },
        {
          id:2,
          name:'Kenhie Land',
          stat:51,
            myVar:'false'
        },
        {
          id:3,
          name:'Mary Land',
          stat:51,
            myVar:'false'
        },
        {
          id:4,
          name:'Kenhie Land',
          stat:51,
            myVar:'false'
        },
        {
          id:5,
          name:'Mary Land',
          stat:51,
            myVar:'false'
        },
        {
          id:6,
          name:'Kenhie Land',
          stat:51,
            myVar:'false' 
        },
        {
          id:7,
          name:'Mary Land',
          stat:51,
             myVar:'false' 
        },
        {
          id:8,
          name:'Kenhie Land',
          stat:51,
             myVar:'false' 
        },
        {
          id:9,
          name:'Mary Land',
          stat:51,
             myVar:'false' 
        },


       ];

Upvotes: 1

boindiil
boindiil

Reputation: 5865

Just set all other values of myVar to false:

angular.forEach($scope.users, function(value, key) {
      value.myVar = false; 
});

I have updated the fiddler

Upvotes: 1

Related Questions