javascript - 排序指令的 Angular 架构

Question

作为 Angular 的新手，我正在寻找实现非常简单的任务的最佳方法。

我的目标是通过 Angular $resource 服务在数据库中更新项目模型的顺序(我有一个位置属性)。

我有以下模板结构:

<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>Title</th>
            <th>Date</th>
            <th>Link</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody id="sortable" my-drag-list>
        <tr ng-repeat="project in projects" ng-class="{warning: !project.publish}">
            <td></td>
            <td>{{project.title}}</td>
            <td>{{project.date|date: 'MMMM yyyy'}}</td>
            <td><a ng-href="{{project.link}}" target="blank">{{project.link}}</a></td>
            <td><a ng-href="#/projects/{{project.id}}/"><span class="glyphicon glyphicon-edit"></span></a></td>
            <td><a ng-click="deleteProject(project)"><span class="glyphicon glyphicon-trash"></span></a></td>
        </tr>
    </tbody>
</table>
<button type="button" class="btn btn-success" ng-show="data.saveSort" my-update-sort-button>Save new sort</button>

我的 tbody 元素中的

tr 是可移动的。当我单击 button 元素(超出了 ng-repeat 指令创建的范围)时，我想用新的位置值更新我的数据库，这些值是由每个tr的dom位置决定(上面的tr将具有较小的位置值)。

乍一看，我打算使用以下内容执行 my-update-sort-button 指令:

var link = function(scope, el){

    el.on('click', function(){
        var els = el.parent().find('tr');

        for(var i = 0, len = els.length; i<len; i++){
            Projects.update({id: els.eq(i).data('projectId')}, {position: i});
        }
    });
};

但我不确定这种解决方案的“质量”。我不喜欢在 tr 元素上添加 data-project-id 属性。

感谢您对此案例的任何想法或解决方案!

Answer 1

您需要在其模型中保留有关“项目”位置的信息。当“项目”移动时，您可以将此信息保存到其模型中。在“my-drag-list”中执行此操作。

当点击更新按钮时，您只需从模型发送信息而无需扫描 DOM:

var link = function(scope, el){

  el.on('click', function(){
      var model;
      for(var i = 0, len = scope.model.projects.length; i<len; i++){
          model = scope.model.projects[i];
          Projects.update({id: model .id}, {position: model.position});
      }
  });
};

最好不要向服务器发送大量请求。发送一个包含所有信息的请求。