使用 ng-repeat 从可排序列表中获取每个项目的位置答案

【问题标题】：Get position of each item from a sortable list with ng-repeat使用 ng-repeat 从可排序列表中获取每个项目的位置
【发布时间】：2016-02-19 01:03:10
【问题描述】：

我有一个使用 ng-repeat 创建的 jquery-ui 可排序 <ul>。当我点击我的提交按钮时，我想获得每个<li> 的id 及其在列表中的位置。我知道有jquery index() 方法，但是我不知道怎么写。

<ul id="sortable">
  <li class="" ng-repeat="ex in exercises">
    <div class="row zone " id="ex.id">
      <div class="zone-header"> {{ex.title_exercise}}
      </div>
      <div class="col-sm-12 zone-body">
        Something
      </div>
    </div>
  </li>
</ul>
<button type="submit" ng-click="generate()" class="btn blue-background">Generate</button>

【问题讨论】：

jQuery UI 可排序代码的指令在哪里？您可以使用 sortable 插件中的事件更新范围

标签： javascript jquery angularjs jquery-ui jquery-ui-sortable

【解决方案1】：

您可以使用排序的toArray和serialize方法，如下所示：

angular.module("app", [])
  .controller("ctrl", function($scope) {
    $scope.exercises = [{
      "id": "ex_1",
      "title_exercise": "one"
    }, {
      "id": "ex_2",
      "title_exercise": "two"
    }, {
      "id": "ex_3",
      "title_exercise": "three"
    }];
    $scope.generate = function() {
      console.log($scope.toArray());
      console.log($scope.serialize());
    }
  }).directive('sortable', function() {
  return {
    link: function(scope, element) {
      element.sortable();
      scope.toArray = function() {
        return element.sortable("toArray");
      }
      scope.serialize = function() {
        return element.sortable("serialize",{ key: "ex" });
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul id="sortable" sortable>
    <li class="" ng-repeat="ex in exercises" id="{{ex.id}}">
      <div class="zone-header">{{ex.title_exercise}}</div>
    </li>
  </ul>
  <button type="submit" ng-click="generate()" class="btn blue-background">Generate</button>
</div>

同时检查 ui-sortable 模块，这样您就不必编写自己的可排序指令。

【讨论】：