[英]ng-hide and ng-show in ng-repeat html table angularjs
I have my table in html view generated using ng-repeat. 我有使用ng-repeat生成的html视图中的表。 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.
在表中,当我单击特定ID行(例如1)中的“显示检查”按钮时,ID编号1旁边应显示“ CHECK”字样,当我单击2时,ID编号2旁边应显示“ CHECK”字样, 1号中的“ CHECK”一词应删除或不可见。 I am using ng-repeat in table.
我在表中使用ng-repeat。 It's almost working fine except when I click button 2 times the other "CHECK" word is still visible which should not.
几乎可以正常工作,除了当我单击按钮2次时,另一个“ CHECK”字样仍然可见,这是不应该的。 Any help would be much appreciated.
任何帮助将非常感激。 Thanks
谢谢
This is my fiddle: http://jsfiddle.net/DharkRoses/onao6ddn/ 这是我的小提琴: 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>
Use $index Fiddle 使用$ index 小提琴
$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'
},
];
Simple solution: 简单的解决方案:
backup the user while toggling the myvar and then use it . 在切换myvar时备份用户,然后使用它。
previousUser={};
$scope.myVar = true;
$scope.toggleShow = function(user){
previousUser.myVar=false;
previousUser=user;
user.myVar =!user.myVar;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.