Angular UI Sortable 无法正常工作 - IT屋-程序员软件开发技术分享社区
首页 前端开发 Angular UI Sortable 无法正常工作
Angular UI Sortable 无法正常工作
[英] Angular UI Sortable not working properly
本文介绍了Angular UI Sortable 无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Angular UI 使我的菜单可排序，有时代码可以工作，有时它会中断，例如在我重新排列项目时复制条目或填充空白菜单.
以下是完整代码-
<html lang="en" ng-app="myapp"><头><title>Angular Sortable Demo</title><script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script><脚本>var myapp = angular.module('myapp', ['ui']);myapp.controller('controller', function ($scope) {$scope.list = [一"、二"、三"、四"、五"、六"];});//angular.bootstrap(document, ['myapp']);<身体><div ng:controller="控制器"><ul ui:sortable ng:model="list"><li ng:repeat="item in list" class="item">{{item}}</li><小时/><div ng:repeat="列表中的项目">{{item}}</div>
</html><风格>.item, .placeholder {填充:2px；宽度:50px；高度:20px；边框:1px 实心 #333；背景:#EEE；}.placeholder {背景:#AEF；}</风格>另外，如果有人可以帮助我在 JSFiddle 中创建它，因为我尝试过但无法将其设置为小提琴 - 小提琴链接
编辑-
有时会变成这样屏幕截图 (菜单项重复)
解决方案
Its Working Fine.... 看看这个
预览
JSFiddle
html
<ul ui:sortable ng:model="list"><li ng:repeat="item in list" class="item">{{item}}</li><小时/><div ng:repeat="列表中的项目">{{item}}</div>
脚本
var myapp = angular.module('myapp', ['ui']);myapp.controller('controller', function ($scope) {$scope.list = [一"、二"、三"、四"、五"、六"];});angular.bootstrap(document, ['myapp']);
I am working on Angular UI for making my menus sortable, sometimes the code works and sometimes its breaks like duplicating the entries or filling the blank menus when I am re arranging items.
Following is the full code -
<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<title>Angular Sortable Demo</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script>
var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
$scope.list = ["one", "two", "three", "four", "five", "six"];
});
//angular.bootstrap(document, ['myapp']);
</script>
</head>
<body>
<div ng:controller="controller">
<ul ui:sortable ng:model="list">
<li ng:repeat="item in list" class="item">{{item}}</li>
</ul>
<hr />
<div ng:repeat="item in list">{{item}}</div>
</div>
</body>
</html>
<style>
.item, .placeholder {
padding: 2px;
width: 50px;
height: 20px;
border: 1px solid #333;
background: #EEE;
}
.placeholder {
background: #AEF;
}
</style>
Also If someone could help me while creating this in JSFiddle as I tried this but unable to set it as a fiddle - Fiddle Link
EDIT-
This is how it becomes at times Screenshot (Menu Items duplicated)
解决方案
Its Working Fine.... Take a look at this
Preview
JSFiddle
html
<div ng:controller="controller">
<ul ui:sortable ng:model="list">
<li ng:repeat="item in list" class="item">{{item}}</li>
</ul>
<hr />
<div ng:repeat="item in list">{{item}}</div>
</div>
script
var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
$scope.list = ["one", "two", "three", "four", "five", "six"];
});
angular.bootstrap(document, ['myapp']);
这篇关于Angular UI Sortable 无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
