Question

我在使用ng-repeat生成的html视图中有我的表格。在表格中，当我点击＆＃34;显示检查＆＃34;某个ID行中的按钮，例如1＆＃34; CHECK＆＃34; id应该在id号1旁边显示，当我点击2时，＆＃34; CHECK＆＃34;在id号码2和单词＆＃34; CHECK＆＃34;旁边应该可以看到单词。数字1应该删除或不可见。我在表中使用ng-repeat。它几乎正常工作，除非我点击另一个按钮2次＆＃34;检查＆＃34;这个词仍然是可见的，不应该。任何帮助将非常感激。谢谢

这是我的小提琴：http://jsfiddle.net/DharkRoses/onao6ddn/

示例代码：

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

Answer 1

只需将myVar的所有其他值设置为false：

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

我更新了fiddler

Answer 2

使用$ 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' 
        },


       ];

Answer 3

简单的解决方案：

在切换myvar时备份用户，然后使用它。

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

};

ng-hide和ng-show在ng-repeat html table angularjs中

3 个答案: