如何使用angularjs拖放列表?

时间:2018-04-11 08:24:40

标签: angularjs

我正在尝试重新排序来自数据库的列表,如下所示。我正在调用api,它为我提供了所需的数据,并通过angularjs控制器将其绑定到html页面。

    <ul ui-sortable class="sortable list">
        <li ng-repeat="y in stagelist">{{y.stageName}}

            <span style="float:right;margin-right:10px;">

                <a href="#" ng-click="deletestage(y.id)"><img src="~/Images/delete.png" /></a> &emsp;
                <img src="~/Images/sortarrow.png" />
            </span>
        </li>
    </ul>

在我的控制器中我有:

    Method.getbyId("stages", _job.JobId).then(function (list) {
        $scope.stagelist = list.data;}).catch(function (data) {
        console.log("access not allowed");
    });

我无法向上或向下移动任何列表项。请帮忙。我在nuget和bower包中都包含了Angular.Ui.Sortable。

最后,我实际上想重新排序列表并将其发送回按钮点击服务器,它应该更新列表的顺序。

1 个答案:

答案 0 :(得分:0)

我使用此网站https://www.webucator.com/blog/2016/10/drag-drop-sortable-angularjs-angular-ui-sortable/来使用拖放模型。然后我用ui.item.sortable.droptargetModel使用了必需的模型来完成我的工作。