尝试应用于<tr>在ng单击中

Attempt to apply to the table in <tr> in the ng-click

本文关键字：ng 单击 gt tr lt 应用于      更新时间：2023-09-26

以下是组织如下的HTML。

   <tr ng-style="{height : hideTagContainer? '38px': '140px'}">
                    <td><img src="../assets/images/icon_condition_coment.png"></td>
                    <td>2014.01.06 16:05</td>
                    <td>Subject</td>
                    <td>Message
                   <div class=“comment-container" ng-show="hideButton">
                    <div class=“coment-list" ng-show="modal">
                    <span class="list-image"><img src="../assets/images/icon_condition_coment.png" style="top:7px;"></span>
                    <span class="list-name”>comment-name</span>
                    <span class="list-time">2014.01.05 13:00</span>
                    <span class="list-message”>reply-messsage</span>
                    </div>
                    <textarea class=“reply-comment" ng-show="clicked[$index]”>OK, I got it</textarea><br/>
                    <span class=“reply-submit" ng-show="clicked[$index]" ng-click="itemIsClicked($index)"></span>
                   </div>
                    </td>
                    <td>
                        <span class="head-logo" ng-click="hideTagContainer(0)" ng-class="{'head-logo': hideButton ,'head-logo folded': !hideButton}"></span>
                      <input type="button" class="comment" value=“OK" ng-click="popupDelete()"></td>
     </tr>
<tr ng-style="{height : hideTagContainer? '38px': '140px'}">
                    <td><img src="../assets/images/icon_condition_coment.png"></td>
                    <td>2014.01.06 17:05</td>
                    <td>Subject2</td>
                    <td>Message2
                   <div class=“comment-container" ng-show="hideButton">
                    <div class=“coment-list" ng-show="modal">
                    <span class="list-image"><img src="../assets/images/icon_condition_coment.png" style="top:7px;"></span>
                    <span class="list-name”>comment-name2</span>
                    <span class="list-time">2014.01.05 14:00</span>
                    <span class="list-message”>reply-messsage2</span>
                    </div>
                    <textarea class=“reply-comment" ng-show="clicked[$index]”>OK, I got it</textarea><br/>
                    <span class=“reply-submit" ng-show="clicked[$index]" ng-click="itemIsClicked($index)"></span>
                   </div>
                    </td>
                    <td>
                        <span class="head-logo" ng-click="hideTagContainer(1)" ng-class="{'head-logo': hideButton ,'head-logo folded': !hideButton}"></span>
                      <input type="button" class="comment" value=“OK" ng-click="popupDelete()"></td>
     </tr>

我试图通过hideTagContainer（index）来更改每个tr的样式。

JS的HideTagcontainer编码如下：

scope.hideButton = false;               
scope.hideTagContainer = function (index) {
    scope.hideButton = !scope.hideButton;
};

将如何在每个中运行隐藏标签容器？

您应该将所有"隐藏"变量存储在一个数组中：

$scope.hideRows = [];
for(var i = 0; i < rowNumber; i ++) $scope.hideRows[i] = false; 
//rowNumber is the number of <tr> row
$scope.hideTagContainer = function (index) {
     $scope.hideRows[index] = !$scope.hideRows[index];
};

每个的html应该是：

<tr ng-style="{height : hideRows[1]? '38px': '140px'}">  
  <!-- Other HTML -->
  <span class="head-logo" ng-click="hideTagContainer(1)" ng-class="{'head-logo': hideRows[1],'head-logo folded': !hideRows[1]}"></span>
</tr>
相关文章：