Change order of objects in the array by dragging rows from angular table JS

Question

Change order of objects in the array by dragging rows from angular table JS

Navigation

#1 by (2 votes)

2

I have a table and using jquery ( sortable ), I would like that when I drag the line by modifying the html of the table, the array

Example:

CAMPO1

CAMPO2 /// DRAG THAT DOWN

CAMPO3 /// LOGO THAT GOES UP

ARRAY ORIGINAL: [{id:1, campo:1},{id:2, campo:2},{id:3, campo:3} ]

ARRAY DEPOIS : [{id:1, campo:1},{id:3, campo:3},{id:2, campo:3}]

Code sample:

<html ng-app="listagemIndex" style="background-color: #FFF;" ng-cloak>
<met charset="UFT-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title ng-bind="apps"></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script><script>angular.module("listagemIndex", []);
angular.module("listagemIndex").controller("listagemIndexControl", function ($scope){

$scope.conjunto = [{id:1, nome:"ana1"},{id:2, nome:"ana2"},{id:3, nome:"ana3"},{id:4, nome:"ana4"}];


////////////////////////
});
</script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
</script>
</head>

<body class="container-fluid" ng-controller="listagemIndexControl">




<table  class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>NOME</th>
    </tr>
  </thead>
  <tbody id="sortable">
    <tr ng-repeat="obj in conjunto | orderBy: obj.nome" >
    <td>{{obj.id}}</td>
      <td><input type="text" ng-model="obj.nome"></td>
    </tr>
  </tbody>
</table>

</body>
</html>

javascript html jquery angularjs sortable

asked by anonymous 25.01.2017 / 00:08

1 answer

Inject $ state (ui-router) into $ http interceptor is causing circular dependency error, how to solve? How to do a select from a select using the Entity Framework ado.net

score 2 · Accepted Answer

Use one more javascript o ui.sortable , is responsible for changes in your collection including changing the indexing of elements according to the new position.

Set the ui.sortable directive in your module a>, as an example:

angular.module("listagemIndex", ['ui.sortable'])

and in the% co_of% tag add these two settings:

tbody

Minimum example:

angular.module("listagemIndex", ['ui.sortable'])
  .controller("listagemIndexControl",
    function($scope) {
      $scope.conjunto = [{
        id: 1,
        nome: "ana1"
      }, {
        id: 2,
        nome: "ana2"
      }, {
        id: 3,
        nome: "ana3"
      }, {
        id: 4,
        nome: "ana4"
      }];

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.16.1/sortable.js"></script>

<div id="lista" ng-app="listagemIndex" ng-controller="listagemIndexControl">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Index</th>
        <th>ID</th>
        <th>NOME</th>
      </tr>
    </thead>
    <tbody ui-sortable="" ng-model="conjunto">
      <tr ng-repeat="obj in conjunto | orderBy: obj.nome">
        <td>{{$index}}</td>
        <td>{{obj.id}}</td>
        <td>
          <input type="text" ng-model="obj.nome">
        </td>
      </tr>
    </tbody>
  </table>
</div>

Note: This way you do not need to use% "title=" show questions tagged 'angular' "> angular stay responsible.

Reference UI.Sortable directive