时间戳

首页 > 解决方案 > 使用上下文菜单隐藏和显示“ng-repeat”表行

css - 使用上下文菜单隐藏和显示“ng-repeat”表行

问题描述

我正在创建一个表格，将行动态添加到表格中。我想通过提供上下文菜单来隐藏选定的行。

我已经创建了 html 和模型来显示上下文菜单，但我不知道如何调用双击。我可以使用它创建一个上下文菜单，但现在可以将选定的行索引传递给函数，以便我可以使用该索引来显示或隐藏。

表格行中的数据有 2 种类型，如果我从后端获取数据，那么我将在行中显示该数据但数据不存在，那么我将在表格行的单元格中添加输入元素。所以我想创建 2 个不同的上下文菜单来处理 2 个不同的行，一个使用来自数据库的数据，另一个使用输入文本框。

我想在具有隐藏选项的背景颜色灰色的行上添加上下文菜单，并且具有背景的行上的上下文菜单将该行添加到其他页面。

HTML

<table id="phaseTable" class="table table-bordered">
    <thead id="phaseHead">
        <tr>
            <th id="phase" scope="col" class="textSize grey t-space th-border">{{'eox.label.phases.phase'| localize}}</th>
            <th id="description" scope="col" class="textSize grey th-border">{{'eox.label.phases.description'| localize}}</th>
            <th id="knowHow" scope="col" class="textSize grey th-border">{{'eox.label.phases.how'| localize}}</th>
        </tr>
    </thead>
    <tbody id="phaseBody">
        <tr context-menu data-target="phase-row-hide" data-ng-repeat="pointCle in jes.listePointCle" id="{{$parent.$id+'-'+$index}}" 
            data-ng-click="setRowSelected($parent.$id,$index)">
            <td id="phaseData" nowrap="nowrap" align="center" class="textSize grey t-space td-border"
                data-ng-if="pointCle.type.length > 0">{{pointCle.type}}
            </td>
            <td id="phaseData" nowrap="nowrap" align="center" class="t-space td-border"
                data-ng-if="pointCle.type == undefined || pointCle.type.length == 0 || pointCle.type.length == ''">
                <input type="text" name="phaseData" maxlength="10" size="5" value="100" style="text-align: center;" class="input-how">
            </td>    
            <td id="descriptionData" class="textSize grey t-space td-border" 
                data-ng-if="pointCle.designation.length > 0">{{pointCle.designation}}
            </td>
            <td id="descriptionData" class="t-space td-border" 
                data-ng-if="pointCle.designation == undefined || pointCle.designation.length == 0 || pointCle.designation.length == ''">
                <input id="descriptionData{{$index}}"type="text" name="descriptionData" maxlength="50" size="50" value="OC BLA BLA" class="input-how" 
                    data-ng-keypress="addRowPhaseOnPress($index)">   
            </td>
            <td id="knowHowData" class="textSize grey t-space td-border" 
                data-ng-if="pointCle.risque.length > 0">{{pointCle.risque}}
            </td>
            <td id="knowHowData" class="t-space td-border" 
                data-ng-if="pointCle.risque == undefined || pointCle.risque.length == 0 || pointCle.risque.length == ''">
                <input type="text" name="knowHowData" id="knowHowData" size="50" maxlength="50" class="input-how">
            </td>
        </tr>
    </tbody>
</table>

模型

<div class="position-fixed" id="phase-row-hide">
<ul class="dropdown-menu" role="menu">
    <li>
        <a class="pointer" role="menuitem" tabindex="1" data-ng-click="setRowSelected()">
            Hide Row
        </a>
    </li>
</ul>

JS - 选择行的代码

$scope.setRowSelected = function(id,index){
    alert('id = '+id);
    alert('index = '+index);
    alert('rowId = '+id+'-'+index);
    $scope.selectedRow = index;
}

屏幕显示

在此处输入图像描述

标签： cssangularjsangularjs-ng-repeat

解决方案

上下文菜单指令：

app.directive("contextMenu", function() {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        elem.on("contextmenu", function (e) {
            scope.$apply(function() {
                var locals = {$event: e, $scope: scope, $element: elem}; 
                scope.$eval(attr.contextMenu, locals);
            });
        });
    }
})

用法：

<tr context-menu="onContext($event, $index)" ng-repeat="...

$scope.onContext = function(ev, index) {
    ev.preventDefault();
    console.log(index);
    //...
};

有关详细信息，请参阅

推荐阅读