Скрыть и показать строку таблицы 'ng-repeat' с помощью контекстного меню - PullRequest
Новая
       23

Скрыть и показать строку таблицы 'ng-repeat' с помощью контекстного меню

0 голосов
/ 30 октября 2019

Я создаю таблицу, добавляя в нее строку динамически. Я хочу скрыть выбранную строку, предоставив контекстное меню.

Я создал 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

1 Ответ

0 голосов
/ 30 октября 2019

Директива контекстного меню: 

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

Для получения дополнительной информации см.

...