我有一个使用AngularJS填充的表。在右键单击表中的链接按钮，我想显示一个特定的上下文菜单（我使用Jquery创建）。很好。我可以看到右键单击上下文菜单。但是，如果我单击上下文菜单中的任何选项，例如＆＃34;删除＆＃34;我想点击该项目的ID。它应该作为参数传递，以便我可以处理该函数。我总是将Id视为未定义。
请帮助我了解如何在上下文菜单中右键单击项目的ID？
//Context Menu Functions
var $contextMenu = $("#contextMenu");
$("body").on("contextmenu", "table tbody button", function(e) {
$contextMenu.css({
display: "block",
left: e.pageX,
top: e.pageY
});
return false;
});
$contextMenu.on("click", "a", function() {
$contextMenu.hide();
});
$("html").click(function() {
$contextMenu.hide();
});
$scope.nodes = [{
"id": 228,
"name": "Folder 1",
"descr": "",
"path": "227/",
"mm": true
},
{
"id": 229,
"name": "Folder 2",
"descr": "",
"path": "227/",
"mm": true
}
];
//Calling Delete Function on Context Menu
$scope.deleteFolder = function(detailid) {
console.log(JSON.stringify(detailid));
//this returns me Undefined. If I had sent detail instead of detail.id - its returning me full json.
};#contextMenu {
position: fixed;
display: none;
}
.contextmenustyle {
display: block;
position: static;
margin-bottom: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table class="table table-responsive table-hover" id="foldertable">
<thead>
<tr style="text-align: center">
<th>Name</th>
<th>Members</th>
</tr>
</thead>
<tbody id="projtable">
<tr ng-repeat="detail in nodes" ng-mouseover="showShare()">
<td><button id="namesdetails" class="btn btn-link" ng-click="openFolder(detail.id, detail.name)" style="text-decoration: none !important">
<span class="fa fa-folder" style="font-size: larger"></span>
{{detail.name}}</button></td>
<td> -- </td>
</tr>
</tbody>
</table>
<!-- context menu -->
<div id="contextMenu" class="dropdown clearfix">
<ul class="dropdown-menu contextmenustyle" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href=""><span class="glyphicon glyphicon-edit"></span> Edit/Rename</a></li>
<li><a tabindex="-1" ng-click="deleteFolder(detail.id)"><span class="glyphicon glyphicon-remove"></span> Delete</a></li>
</ul>
</div>
答案 0 :(得分：1)
您可以将此 <Order OrderNo="Y1101001">
<OrderLines>
<OrderLine LineNo="1" LineKey="20171100011">
<OrderLine LineNo="2" LineKey="20171100012">
</OrderLines>
</Order>
作为数据属性添加到按钮中：
id因此，在触发上下文菜单事件时，您将按钮作为上下文，并可以从数据属性中读取id
<button ng-click="openFolder(detail.id, detail.name)" data-id="{{detail.id}}">
答案 1 :(得分：0)
绑定函数的某些更改需要获取单击的对象。
HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
{{temp}}
<table class="table table-responsive table-hover" id="foldertable">
<thead>
<tr style="text-align: center">
<th>Name</th>
<th>Members</th>
</tr>
</thead>
<tbody id="projtable">
<tr ng-repeat="detail in nodes" ng-mouseover="showShare()">
<td><button id="namesdetails" class="btn btn-link" ng-click="openFolder(detail.id, detail.name)" style="text-decoration: none !important">
<span class="fa fa-folder" style="font-size: larger"></span>
{{detail.name}}</button></td>
<td> -- </td>
</tr>
</tbody>
</table>
<!-- context menu -->
<div id="contextMenu" class="dropdown clearfix">
<ul class="dropdown-menu contextmenustyle" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" attr="edit" href=""><span class="glyphicon glyphicon-edit"></span> Edit/Rename</a></li>
<li><a tabindex="-1" attr="delete" ng-click="deleteFolder(detail.id)"><span class="glyphicon glyphicon-remove"></span> Delete</a></li>
</ul>
</div>
绑定点击功能：
$contextMenu.on("click", "a", function(e) {
console.log(e.target.attributes.attr.value); //delete or edit
$contextMenu.hide();
});
绑定函数中传递的事件。你可以在点击功能中获得点击的对象。
答案 2 :(得分：0)
要制作简单的解决方案，我们可以为每个detail object制作一个上下文菜单。
你的主要问题是上下文菜单div在你的之外
ng-repeat循环，因此您无法获得detail.id。
我把它放在你的循环中并将上下文菜单id改为class，一切都可以作为你的代码。只需忽略其他角度特定代码，如ng-controller，ng-app，仅适用于此演示工作。正如你可以看到我以这种方式显示上下文菜单
$(this).parent().find('.contextMenu').css({
display: "block",
left: e.pageX,
top: e.pageY
});
我也做了Working jsBin
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$("body").on("contextmenu", "table tbody button", function(e) {
$(".contextMenu").hide();
$(this).parent().find('.contextMenu').css({
display: "block",
left: e.pageX,
top: e.pageY
});
return false;
});
$(".contextMenu").on("click", "a", function() {
$(this).hide();
});
$("html").click(function() {
$(".contextMenu").hide();
});
$scope.nodes = [{
"id": 228,
"name": "Folder 1",
"descr": "",
"path": "227/",
"mm": true
},
{
"id": 229,
"name": "Folder 2",
"descr": "",
"path": "227/",
"mm": true
}
];
$scope.deleteFolder = function(detailid) {
console.log(detailid);
};
});.contextMenu {
position: fixed;
display: none;
}
.contextmenustyle {
display: block;
position: static;
margin-bottom: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table class="table table-responsive table-hover" id="foldertable">
<thead>
<tr style="text-align: center">
<th>Name</th>
<th>Members</th>
</tr>
</thead>
<tbody id="projtable">
<tr ng-repeat="detail in nodes" ng-mouseover="showShare()">
<td><button id="namesdetails" class="btn btn-link" ng-click="openFolder(detail.id, detail.name)" style="text-decoration: none !important"> <span class="fa fa-folder" style="font-size: larger"></span> {{detail.name}}</button>
<div class="dropdown clearfix contextMenu">
<ul class="dropdown-menu contextmenustyle" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href=""><span class="glyphicon glyphicon-edit"></span> Edit/Rename</a></li>
<li><a tabindex="-1" ng-click="deleteFolder(detail.id)"><span class="glyphicon glyphicon-remove"></span> Delete</a></li>
</ul>
</div>
</td>
<td> -- </td>
</tr>
</tbody>
</table>
</div>