angularjs - get array in sorted order -


i have made array of object passed table. table has ui-sortable

<table class="table table-hover">   <tbody ui-sortable="sortableoptions">   <tr ng-repeat="f in building.floors" ng-click="events.gotofloor(f.id)">     <td>{{f.id}}</td>     <td>{{f.level + building.minimumfloor}}</td>     <td><button id="remove" class="btn btn-danger" ng-click="events.removefloor(f.id);$event.stoppropagation();">remove</button></td>   </tr>   </tbody> </table> 

now using

$scope.sortableoptions = {         update: function(e, ui) {             var : number = 0;             $scope.building.floors.foreach(f => {                   alert(f.level);                    f.level = i;                 i++;             });         }     }; 

i want change level value in new order still foreach order of pre sorted. how can iterate through array in new order (after sorting) ?

edit:

i use these libs:

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>             <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>      <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>     <script src="bootstrap/js/bootstrap-switch.min.js"></script>           <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>              <script src="scripts/fabricjs_viewport.js"></script> 

edit2:

when ia add ng-model tbody ui-sortable option cannot swap last element , if ... there strange behavior

<tbody ui-sortable="sortableoptions" ng-model="floors">   <tr ng-repeat="f in floors" ng-click="events.gotofloor(f.id)">     <td>{{f.id}}</td>     <td>{{f.level}}</td>     <td><button id="remove" class="btn btn-danger" ng-click="events.removefloor(f.id);$event.stoppropagation();">remove</button></td>   </tr>   </tbody> 

according docs you're missing ng-model


apply directive form elements:

<ul ui-sortable ng-model="items">   <li ng-repeat="item in items">{{ item }}</li> </ul> 

developing notes:

ng-model required, directive knows model update. ui-sortable element should contain 1 ng-repeat , not other elements (above or below).

otherwise index matching of generated dom elements , ng-model's items break.

in other words: items of ng-model must match indexes of generated dom elements.

filters manipulate model (like filter, orderby, limitto,...) should applied in controller instead of ng-repeat (refer provided examples).

this preferred way since it:

  • is performance wise better reduces chance of code duplication
  • is suggested angularjs team
  • it not break matching of generated dom elements , ng-model's items

ui-sortable lists containing many 'types' of items can implemented using dynamic template loading ng-include or loader directive, determine how each model item should rendered. take @ tree dynamic template example.


https://github.com/angular-ui/ui-sortable#usage


Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -