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

Question

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

<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>

Answer 1

您可以使用如下所示的toArray and 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 模块，这样您就不必编写自己的可排序指令。

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

Get position of each item from a sortable list with ng-repeat

javascript

jquery

jquery-ui

jquery-ui-sortable

angularjs