Databases
StackOverflow2013
Postsdbo
POAngularJS ng-repeat rerender
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS ng-repeat rerender
    primarykey
    data
    text
    <p>I'm building a simple app with AngularJS. The app make a async AJAX call to the server and the server returns an array like this:</p> <pre><code>{ paragraphs: [ {content: "content one"}, {content: "cnt two"}, {content: "random three"}, {content: "last one yeeaah"} ] } </code></pre> <p>So I'm setting this content to the StorageService factory via my set method. Everything is fine here. </p> <p>I'm using <code>ng-repeat</code> to render the results and <code>JQuery UI sortable</code> to be able to change the order of the elements. When an item is swapped my script is calling the StorageService.swap method and the element order in StorageService is updated, <strong>BUT ng-repeat isn't rerendering the change</strong>, but if I remove/add or change the content it's working. How I can force the angular to rerender the ng-repeat?</p> <p><strong>= JSFIDDLE =</strong></p> <p><a href="http://jsfiddle.net/6Jzx4/3/" rel="nofollow noreferrer">http://jsfiddle.net/6Jzx4/3/</a></p> <p><strong>= Example =</strong></p> <p><img src="https://i.stack.imgur.com/xpC4u.png" alt="Example"></p> <p>When a swap occurs the ng-repeat should be rerendered, so the IDs are consecutive</p> <p><strong>= Code =</strong></p> <p>HTML</p> <pre><code>&lt;div ng-controller="Test" sortable&gt; &lt;div ng-repeat="item in data().paragraphs" class="box slide_content" id="{{$index}}"&gt; {{item.content}}, ID: {{$index}} &lt;/div&gt; &lt;input type="button" ng-click="add()" value="Add"&gt; &lt;/div&gt; </code></pre> <p>JS</p> <pre><code>var App = angular.module("MyApp", []); App.controller("Test", function($scope, StorageService) { StorageService.set({ paragraphs: [ {content: "content one"}, {content: "cnt two"}, {content: "random three"}, {content: "last one yeeaah"} ] }); $scope.data = StorageService.get; $scope.add = StorageService.add; }); App.directive("sortable", function(StorageService) { return { link: function(scope, element, attrs) { $(element[0]).sortable({ cancel: ".disabled", items: "&gt; .slide_content:not(.disabled)", start: function(e, t) { t.item.data("start_pos", t.item.index()); }, stop: function(e, t) { var r = t.item.data("start_pos"); if (r != t.item.index()) { StorageService.sort($(this).sortable("toArray")); } } }); } }; }); App.factory('StorageService', function() { var output = {}; return { set: function(data) { angular.copy(data, output); return output; }, get: function() { return output; }, add: function() { output.paragraphs.push({ content: 'Content' }); }, sort: function(order) { var localOutput = []; for (var j in order) { var id = parseInt(order[j]); localOutput.push(output.paragraphs[id]); } console.log('new order', localOutput); output.paragraphs = localOutput; return output; } }; }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDeepsy
    1. USDeepsy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAngularJS ng-repeat rerender
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI don't see the relevant code in the jsfiddle...it also should be here in the post itself. I imagine it's because you didn't correctly utilize promises or you somehow ended up needing a `$scope.$apply()`.
      singulars
      1. POAngularJS ng-repeat rerender
      1. USm59
    2. COwhat is demo supposed to show us? Hard to help if demo doesn't replicate problem listed
      singulars
      1. POAngularJS ng-repeat rerender
      1. UScharlietfl
    3. CO@charlietfl well look the picture below "Example", it's explaining my problem. When a swap occurs ng-repeat isn't rerendered for some reason. See the middle picture ( after swap ), notice the second element has ID:2 and the third has ID:1, it should be visa-versa as showed in the picture 3.
      singulars
      1. POAngularJS ng-repeat rerender
      1. USDeepsy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload