Question

我有一个表，其中最后一个列标题具有两个按钮，分别根据ng-show可见和不可见两个按钮。

<tbody ng-repeat="detail in details| startFrom:(currentDetailPage-1)* pageSize|limitTo: pageSize track by $index">
                    <tr>                <!--<td>{{detail.name}}</td>
                        <td>{{detail.gender}}</td>
                        <td>{{detail.mobileNumber}}</td>
                        <td>{{detail.emailId}}</td>
                        <td>{{detail.defvpa}}</td>-->

                        <td ng-click="isOpen=!isOpen">{{detail.user_name}}</td>
                        <td ng-click="isOpen=!isOpen">{{detail.mobile_no}}</td>
                        <td ng-click="isOpen=!isOpen">{{detail.email_id}}</td>
                        <td ng-click="isOpen=!isOpen">{{detail.default_vpa}}</td>
                        <td ng-click="isOpen=!isOpen">{{detail.def_vpa_name}}</td>
                        <td ng-click="isOpen=!isOpen">{{detail.last_trans_ctr}}</td>
                        <td>
                            <div class="blockUserDetailCls">
                                <!--<div class="b1">-->
                                <div class="b1" ng-show="showUserUnblockBtn">
                                    <button ng-click="unblockUser($index);">Unblock</button>
                                    <!--<span class="b1tooltip">Blocked</span>-->
                                </div>
                                <!--<div class="b2">-->
                                <div class="b2" ng-show="showUserBlockBtn">
                                    <button ng-click="blockUser($index);">Block</button>
                                    <!--<span class="b2tooltip">Not Blocked</span>-->
                                </div>
                            </div>

                        </td>

                    </tr>

    </tbody>

我必须根据服务器响应显示这些按钮之一。

for(var j=0; j<=response.data.users.length-1; j++){
                                if(response.data.users[j].block != undefined){
                                    if(response.data.users[j].block == 1){
                                        console.log("blockTrue");
                                        $scope.showUserUnblockBtn = true;
                                        $scope.showUserBlockBtn = false;
                                    }
                                }
                                else{
                                    console.log("blockFalse");
                                    $scope.showUserUnblockBtn = false;
                                    $scope.showUserBlockBtn = true;
                                }
                             }

结果不符合我的要求。好像对于任何一种情况，第一行都是正确的，那么所有行都显示相同的结果。

Answer 1

您为每个用户使用相同的范围变量。您需要使用数组，也可以 ng-show上的使用条件，如下所示：

<td>
     <div class="blockUserDetailCls">
     <!--<div class="b1">-->
     <div class="b1" ng-show="detail.block==1">
      <button ng-click="unblockUser($index);"><i class="fas fa-user-slash"></i></button>
       <!--<span class="b1tooltip">Blocked</span>-->
        </div>
        <!--<div class="b2">-->
        <div class="b2" ng-show="detail.block!=1">
        <button ng-click="blockUser($index);"><i class="fas fa-user"></i></button>
        <!--<span class="b2tooltip">Not Blocked</span>-->
         </div>
        </div>
</td>

假设您正在for循环中填充details数组，这是解决问题的一种可能方法：

$scope.details=[];
for(var j=0; j<=response.data.users.length-1; j++)
{
    var det={
             user_name: response.data.users[j].user_name,
             mobile_no: response.data.users[j].mobile_no,
             email_id: response.data.users[j].email_id,
             default_vpa: response.data.users[j].default_vpa,
             def_vpa_name: response.data.users[j].default_vpa_name,
             last_trans_ctr: response.data.users[j].last_trans_ctr,
             block: response.data.users[j].block  //this is the line that will be used in ng-show

           };
    $scope.details.push(det);
}

表格行显示了ng-show在ng-repeat上的无敌行为

1 个答案: