Hide and Show 'ng-repeat' Table Row Using Contextual Menu

Question

I am creating a table adding row dynamically into the table. I want to hide selected row by providing a contextual menu.

I have created the html and model to show contextual menu but I don't how to call double click. I am able to create a contextual menu with this but now able to pass the selected row index into the function so that i can use that index to show or hide.

Data in table row is of 2 type, if i am getting data from backend then I am displaying that data in row but data not present then I am adding input element in cell of the table row. So I want to create 2 different contextual menu to work on 2 different rows one with data from database and other one with input textbox.

I want to add contextual menu on Row with background color grey which has hide option and the contextual menu on row with background will add that row that to other page.

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>

Model

<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 - Code to select the row

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

Screen Display

you can create new object in jes.listePointCle with selected index when you want to create if data not coming from backend side — Trushar Narodia

georgeawg georgeawg · Accepted Answer · 2019-10-30T14:07:18

Context menu directive:

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);
            });
        });
    }
})

Usage:

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

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

For more information, see

MDN Web API Reference - contextmenu Event

Hide and Show 'ng-repeat' Table Row Using Contextual Menu

1 Answers