angular.js - 从视图中更新模型中的sortorder

Question

我有一个Express Model / Controller，从mongoDB集合中获取数据。此集合中的一列是sortOrder（我用它来按特定顺序显示条目）。为了管理这个集合中的数据，我有一个带表的angular.js视图，列出了这些条目。

该表是使用ui-sortable构建的，它允许我拖放表行，即更改显示顺序。到目前为止，一切都按预期工作。

现在，我的问题是：如何让我的模型/控制器识别这些更改，并更新集合中的sortOrder列，现在显示新的排序顺序？

这是视图的代码：

<section data-ng-controller="BusinessunitsController" data-ng-init="find()">
    <div class="page-header">business units</div>
    <table>
        <thead>
            <tr>
                <th><i class="icon-fontawesome-webfont-141"></i></th>
                <th>business unit name</th>
                <th><a href="/#!/businessunits/create"><i class="icon-fontawesome-webfont-241 right"></i></a></th>
            </tr>
        </thead>
        <tbody ui-sortable ng-model="businessunits">
            <tr data-ng-repeat="businessunit in businessunits">
                <td class="draggable">{{businessunit.sortOrder}}</td>
                <td style="color:{{businessunit.color}}">{{businessunit.name}}</td>
                <td>
                    <a data-ng-href="#!/businessunits/{{businessunit._id}}"><i class="icon-fontawesome-webfont-65"></i></a>
                    <a data-ng-href="#!/businessunits/{{businessunit._id}}"><i class="icon-fontawesome-webfont-240 alert"></i></a>
                </td>
            </tr>
        </tbody>
    </table>
 </section>

角度控制器：

'use strict';

// Businessunits controller
angular.module('businessunits').controller('BusinessunitsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Businessunits',
    function($scope, $stateParams, $location, Authentication, Businessunits) {
        $scope.authentication = Authentication;

        // Create new Businessunit
        $scope.create = function() {
            // Create new Businessunit object
            var businessunit = new Businessunits({
                name: this.name,
                color: this.color,
                sortOrder: this.sortOrder
            });

            // Redirect after save
            businessunit.$save(function(response) {
                $location.path('businessunits/' + response._id);
            });

            // Clear form fields
            this.name = '';
        };

        // Remove existing Businessunit
        $scope.remove = function(businessunit) {
            if (businessunit) {
                businessunit.$remove();

                for (var i in $scope.businessunits) {
                    if ($scope.businessunits[i] === businessunit) {
                        $scope.businessunits.splice(i, 1);
                    }
                }
            } else {
                $scope.businessunit.$remove(function() {
                    $location.path('businessunits');
                });
            }
        };

        // Update existing Businessunit
        $scope.update = function() {
            var businessunit = $scope.businessunit;

            businessunit.$update(function() {
                $location.path('businessunits/' + businessunit._id);
            });
        };

        // Find a list of Businessunits
        $scope.find = function() {
            Businessunits.query(function(businessunits) {
                $scope.businessunits = businessunits;
            });
        };

        // Find existing Businessunit
        $scope.findOne = function() {
            Businessunits.get({
                businessunitId: $stateParams.businessunitId
            }, function(businessunit) {
                $scope.businessunit = businessunit;
            });
        };
    }
]);

Express控制器：

'use strict';

/**
 * Module dependencies.
 */
var mongoose = require('mongoose'),
    Businessunit = mongoose.model('Businessunit'),
    _ = require('lodash');

/**
 * Create a Businessunit
 */
exports.create = function(req, res) {
    var businessunit = new Businessunit(req.body);
    businessunit.user = req.user;

    businessunit.save(function(err) {
        if (err) {
            return res.send('users/signup', {
                errors: err.errors,
                businessunit: businessunit
            });
        } else {
            res.jsonp(businessunit);
        }
    });
};

/**
 * Show the current Businessunit
 */
exports.read = function(req, res) {
    res.jsonp(req.businessunit);
};

/**
 * Update a Businessunit
 */
exports.update = function(req, res) {
    var businessunit = req.businessunit;

    businessunit = _.extend(businessunit, req.body);

    businessunit.save(function(err) {
        if (err) {
            res.render('error', {
                status: 500
            });
        } else {
            res.jsonp(businessunit);
        }
    });
};

/**
 * Delete an Businessunit
 */
exports.delete = function(req, res) {
    var businessunit = req.businessunit;

    businessunit.remove(function(err) {
        if (err) {
            res.render('error', {
                status: 500
            });
        } else {
            res.jsonp(businessunit);
        }
    });
};

/**
 * List of Businessunits
 */
exports.list = function(req, res) {
    Businessunit.find().sort('sortOrder').populate('user', 'name').exec(function(err, businessunits) {
        if (err) {
            res.render('error', {
                status: 500
            });
        } else {
            res.jsonp(businessunits);
        }
    });
};

/**
 * Businessunit middleware
 */
exports.businessunitByID = function(req, res, next, id) {
    Businessunit.findById(id).populate('user', 'name').exec(function(err, businessunit) {
        if (err) return next(err);
        if (!businessunit) return next(new Error('Failed to load Businessunit ' + id));
        req.businessunit = businessunit;
        next();
    });
};

/**
 * Businessunit authorization middleware
 */
exports.hasAuthorization = function(req, res, next) {
    if (req.businessunit.user.id !== req.user.id) {
        return res.send(403, 'User is not authorized');
    }
    next();
};