AngularJS神奇的排序模块ui-sortable

JavaScript 2014-11-06 AngularJS,ui-sortable,排序


AngularJS推出后迅速成为前端框架里独树一帜的牛逼框架,特别是做数据呈现页面的更是觉得前端开发应该是独立的,数据提供只架好RESUful Web Server即可。

好,废话不多说,本次介绍的模块是angularjs-ui-sortable,由于angularjs-ui-sortable是基于jQueryUI开发,所以要使用这个模块必须先引入jQuery与jQueryUI,angularjs-ui-sortable的github仓库地址:https://github.com/angular-ui/ui-sortable

仓库的README里就写明了使用要求:

所以,你要像上面一样,依次引入以上列出的脚本,假设所有脚本你都已经下载好了

引入脚本后,我们可以来小小试一下:

JavaScript Code:

angular.module('daybabyApp')
    .controller('MainCtrl', function ($scope) {
        $scope.todos = [
            'one',
            'two',
            'three'
        ];
});

HTML Code:

<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排序,而是数据与UI双向同步

这个模块支持了好多事件,通过这些事件你可以更好的控制排序功能

 

文字链接:《AngularJS神奇的排序模块ui-sortable

文章地址:http://www.qttc.net/201411452.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 3