使用上下文菜单隐藏并显示'ng-repeat'表行

问题描述 投票:0回答:1

我正在创建一个表,在表中动态添加行。我想通过提供上下文菜单来隐藏所选行。

我创建了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;
}

屏幕显示

enter image description here

css angularjs angularjs-ng-repeat
1个回答
0
投票

上下文菜单指令:

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)" ...
$scope.onContext = function(ev, index) {
    ev.preventDefault();
    console.log(index);
    //...
};

有关更多信息,请参阅

© www.soinside.com 2019 - 2024. All rights reserved.