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/

angular 要素サービスとして使用するには、angular の前に jquery を配置します。

<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 に答える