0

在此处获取 angular-ui 的简单可排序演示时遇到问题 - http://jsfiddle.net/B3YDr/

<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
    <li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>


angular.module('myApp', ['ui']);
var myCtrl = function($scope) {
    $scope.items = ['One','Two','Three'];
};
  • 包含 jQuery 和 jQueryUI
  • 包含 AngularJS
  • 包含 AngularUI
  • 添加了“ui”模块作为依赖项

我已经在http://angular-ui.github.io/#directives-sortable复制了几乎相同的示例代码,但仍然无法重新排序列表项。

谁能指出什么是错的?谢谢

4

2 回答 2

5

您需要控制脚本的导入顺序:

http://jsfiddle.net/B3YDr/4/

将 jquery 放在 angular 之前,以便 angular 将其用作元素服务。

<div ng-app="myApp" ng-controller="myCtrl">
    <ul ng-model="items" ui-sortable>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <pre>{{items}}</pre>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.2.0/ui-bootstrap-tpls.js"></script>
于 2013-04-26T15:29:51.617 回答
0

您可以使用 sortableOptions 中的方法,如下面的代码

$scope.sortableOptions = {
            handle: '.custom-ctrl-handle',
            stop: function(e, ui) {
                // console.log("stop function worked");
            }
        };
于 2016-01-06T06:55:37.983 回答