使用ng-repeat

Question

我有一个用<ul>创建的jquery-ui可排序ng-repeat。 当我点击我的提交按钮时，我希望每个id的{​​{1}}位置在列表中。我知道有jquery <li>方法，但我不知道如何编写它。

index()

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