最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - angular ui sortable callback - Stack Overflow

programmeradmin4浏览0评论

Is there a way to set a callback function with angular ui's sortable? I'd like to add ng-update="foo()" to the tbody tag below and have foo run whenever the list changes.

<tbody id="existingStockResults" ui-sortable ng-model="processes">
    <tr ng-repeat="process in processes" ng-class="{odd: $index%2 == 0, even: $index%2 != 0}">
        <td>{{process.process}}</td>
        <td>{{process.vendor}}</td>
        <td>{{process.desc}}</td>
            <td>{{process.cost}}</td>
        <td><a href="#" ng-click="editProcess($index)">edit</a></td>
        <td><a href="#" ng-click="removeProcess($index)">remove</a></td>
    </tr>
</tbody>

thanks!

Is there a way to set a callback function with angular ui's sortable? I'd like to add ng-update="foo()" to the tbody tag below and have foo run whenever the list changes.

<tbody id="existingStockResults" ui-sortable ng-model="processes">
    <tr ng-repeat="process in processes" ng-class="{odd: $index%2 == 0, even: $index%2 != 0}">
        <td>{{process.process}}</td>
        <td>{{process.vendor}}</td>
        <td>{{process.desc}}</td>
            <td>{{process.cost}}</td>
        <td><a href="#" ng-click="editProcess($index)">edit</a></td>
        <td><a href="#" ng-click="removeProcess($index)">remove</a></td>
    </tr>
</tbody>

thanks!

Share Improve this question edited Jul 11, 2016 at 21:20 Kara 6,22616 gold badges53 silver badges58 bronze badges asked Nov 21, 2012 at 19:24 kreekkreek 8,8349 gold badges45 silver badges70 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

You can now specify the update function in the ui-sortable attribute, like this:

<tbody ui-sortable="{update: foo()}">

But there still are a few issues with the sortable directive, like in this example. They are currently discussed here.

I prefer to use an options hash with my update callback defined, in my scope like this:

$scope.sortableOptions = {
    disabled: false,
    update: function(event) {
        return $scope.sortableUpdated = true;
    }
};

and in the template:

<div ui-sortable="sortableOptions"> ...

Reading through the ui-sortable file (there isn't a demo of it on the angular-ui homepage, wonder why?) here, I see that it allows for 2 callbacks -> start and update, for before and after the change you trigger. So something like this should work:

<tbody id="existingStockResults" ui-sortable update="myCallback()" ng-model="processes">
发布评论

评论列表(0)

  1. 暂无评论