簡體   English   中英

在ng-repeat html表angularjs中的ng-hide和ng-show

[英]ng-hide and ng-show in ng-repeat html table angularjs

我有使用ng-repeat生成的html視圖中的表。 在表中,當我單擊特定ID行(例如1)中的“顯示檢查”按鈕時,ID編號1旁邊應顯示“ CHECK”字樣,當我單擊2時,ID編號2旁邊應顯示“ CHECK”字樣, 1號中的“ CHECK”一詞應刪除或不可見。 我在表中使用ng-repeat。 幾乎可以正常工作,除了當我單擊按鈕2次時,另一個“ CHECK”字樣仍然可見,這是不應該的。 任何幫助將非常感激。 謝謝

這是我的小提琴: 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>

只需將myVar所有其他值設置為false:

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

我已經更新了提琴手

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


       ];

簡單的解決方案:

在切換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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM