AngularJS神奇的排序模塊ui-sortable
發(fā)布時間：2014/11/06 來源：長沙做網(wǎng)站
AngularJS推出后迅速成為前端框架里獨樹一幟的牛逼框架，特別是做數(shù)據(jù)呈現(xiàn)頁面的更是覺得前端開發(fā)應(yīng)該是獨立的，數(shù)據(jù)提供只架好RESUful Web Server即可。
好，廢話不多說，長沙做網(wǎng)站本次介紹的模塊是angularjs-ui-sortable，由于angularjs-ui-sortable是基于jQueryUI開發(fā)，所以要使用這個模塊必須先引入jQuery與jQueryUI，angularjs-ui-sortable的github倉庫地址：https://github.com/angular-ui/ui-sortable
倉庫的README里就寫明了使用要求：
所以，你要像上面一樣，依次引入以上列出的腳本，假設(shè)所有腳本你都已經(jīng)下載好了
引入腳本后，我們可以來小小試一下：
JavaScript Code:
|
1
2
3
4
5
6
7
8
|
angular.module('daybabyApp') .controller('MainCtrl', function ($scope) { $scope.todos = [ 'one', 'two', 'three' ];}); |
HTML Code:
|
1
2
3
4
5
6
7
8
|
<div class="row" ui-sortable ng-model="todos"> <div class="input-group" ng-repeat="todo in todos" style="padding:5px 10px; cursor:move;"> <input type="text" ng-model="todo" class="form-control"> <span class="input-group-btn"> <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button> </span> </div></div> |
看看效果：
要看這個例子請點這里：http://www.qttc.net/static/demo/angular-sortable/
需要注意的是，這個排序也繼承了AngularJS的特點，它不是單純的UI排序，而是數(shù)據(jù)與UI雙向同步
這個模塊支持了好多事件，通過這些事件你可以更好的控制排序功能