AngularJS -使用Jquery在HTML表中添加下拉菜单特性
AngularJS -使用Jquery在HTML表中添加下拉菜单特性
提问于 2018-07-25 05: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>回答 1
Stack Overflow用户
发布于 2018-07-25 08:57:40
首先，我不熟悉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>已更新
哦..。也许我被误解了。您希望使用普通的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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51507964
复制相关文章
相似问题