AngularJS - 使用 angularjs 拖放列表库时在 html 页面中没有得到任何东西
Posted
技术标签:
【中文标题】AngularJS - 使用 angularjs 拖放列表库时在 html 页面中没有得到任何东西【英文标题】：AngularJS - Not getting anything in html page while using angularjs drag and drop list library 【发布时间】：2020-06-10 07:02:19 【问题描述】：我想在我的项目中实现拖放功能。为此，我使用angular-drag-and-drop-lists，这是该功能的demo。我没有得到任何 html 页面。我试图在没有相关 CSS 的情况下打开列表，但效果很好（注释了那段代码）。
谁能为这个问题提供解决方案，为什么我没有在 html 上得到任何东西而在控制台上没有任何错误。
HTML：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="./script.js"></script>
<script src="./angular-drag-and-drop-lists.js"></script>
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body ng-app="demo">
<div ng-controller="SimpleDemoController" class="simpleDemo">
<ul dnd-list="list">
<li ng-repeat="item in list" dnd-draggable="item"
dnd-moved="list.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="'selected': models.selected === item">
item.label
</li>
</ul>
<!-- <ul ng-repeat="item in models.lists.A">
<li>item.label</li>
</ul> -->
</div>
</body>
</html>
Javascript
var demo = angular.module('demo', []);
var SimpleDemoController = function($scope)
$scope.models =
selected: null,
lists: "A": [], "B": []
;
console.log($scope.models.lists.A, $scope.models.lists.B);
// Generate initial model
for (var i = 1; i <= 3; ++i)
$scope.models.lists.A.push(label: "Item A" + i);
$scope.models.lists.B.push(label: "Item B" + i);
// Model to JSON for demo purpose
$scope.$watch('models', function(model)
$scope.modelAsJson = angular.toJson(model, true);
, true);
;
demo.controller('SimpleDemoController', SimpleDemoController);
css
.simpleDemo ul[dnd-list]
min-height: 42px;
padding-left: 0px;
.simpleDemo ul[dnd-list] .dndDraggingSource
display: none;
.simpleDemo ul[dnd-list] .dndPlaceholder
background-color: #ddd;
display: block;
min-height: 42px;
.simpleDemo ul[dnd-list] li
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
.simpleDemo ul[dnd-list] li.selected
background-color: #dff0d8;
color: #3c763d;
【问题讨论】：
您正在使用dnd-list="list"，但您从未定义过list - 它可能被视为一个空数组。对于您正在使用的列表项ng-repeat="item in list"，所以没有什么可以迭代的。这就是为什么您的视图中没有显示任何内容的原因。我猜您应该将所有出现的list 替换为models.lists.A，但很难准确说出您在做什么。您是否只是想使用dnd-list 来重新排列单个列表而不是在列表之间拖放？
关注这个实现embed.plnkr.co/plunk/NwleL2
【参考方案1】：
您需要在演示变量（角度模块）中添加“dndLists”
var demo = angular.module('demo', ["dndLists"]);
【讨论】：
以上是关于AngularJS - 使用 angularjs 拖放列表库时在 html 页面中没有得到任何东西的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS 工具方法以及AngularJS中使用jQuery
AngularJS + JQuery：如何在 angularjs 中获取动态内容