AngularJS - 使用 Jquery 将下拉菜单功能添加到 HTML 表中答案

【问题标题】：AngularJS - Add a drop down menu feature into a HTML table using JqueryAngularJS - 使用 Jquery 将下拉菜单功能添加到 HTML 表中
【发布时间】：2018-07-24 21:44:30
【问题描述】：

我想添加一个功能（这是一个下拉菜单到表格内的图像图标中。下面是代码说明：

<HTML>
<!--Table-->
<div id="tableStructure"...>
   <table...>
      <thread>
         <tr><td class="people"></td></tr></thread></table>
...
</HTML>

这是控制器（脚本）

$scope.buildtable = function() {
...
       $(".people", row).html("<img src='" + person.imageURL + "'/>");

...

所以，在桌子上，每一行都会显示一个图像图标，我的问题是当你点击图标时如何添加一个下拉菜单。我的菜单如下所示：

<div ng-controller="Controller">
   <li> List 1 </li>
   ...
<div>

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

首先，我不熟悉 AngularJS。

当我看到你的代码时，我觉得很有趣，因为你使用 AngularJS，但实际上你使用的是 '.html()'，这是 jQuery 方法。根本没有绑定。

我个人认为，如果有组织的话，你同时使用“jQuery”和“AngularJS”是没有问题的。我想出了这两个想法。
1.使用过滤器使用相同的数组。

<!-- table(when the img is clicked, you update its state.  -->
<tr ng-repeat="people in peopleList">
  <td>{{people.name}}</td>
  <td><img ng-src="{{people.imageUrl}}" ng-click="imgClick($index)"/></td>
</tr>

<!-- list(use the same array using filter) -->
<li ng-repeat="people in peopleList | filter : {state : '1'}">
  <img ng-src="{{people.imageUrl}}" />
</li>

2.为列表准备数据。

 <!-- table(when the img is clicked, you push its data to listItems.  -->
<tr ng-repeat="people in peopleList">
  <td>{{people.name}}</td>
  <td><img ng-src="{{people.imageUrl}}" ng-click="imgClick($index)"/></td>
</tr>

<!-- list -->
<li ng-repeat="item in listItems">
  <img ng-src="{{item.imageUrl}}" />
</li>

Here's a super rough example.

更新
哎呀......也许我被误解了。您想要使用普通的 HTML 表格（由 jQuery.html() 创建）。在这种情况下，您可以使用此代码。

// called when the img is clicked
$(".table").on("click", ".people-image", function() {
    // Get the scope(you need to select which has ng-controller).
    var $scope = angular.element($('#your-app-controller')).scope();
    // Add img url.
    $scope.listItems.push({ imageUrl : $(this).attr("src") });
    // Apply it to view. (It seems this is bad practice, though.)
    $scope.$apply();
});

Here's an example.

【讨论】：