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

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

本文关键字：获取 项目 位置 列表 ng 排序 使用      更新时间：2023-09-26

我有一个用ng-repeat创建的jquery-ui可排序<ul>。当我点击我的提交按钮时，我想id每个<li>及其在列表中的位置。我知道有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>
您可以使用

可排序的toArray和序列化方法，如下所示：

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 可排序模块，这样您就不必编写自己的可排序指令。

相关文章：