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.
Comments
Post a Comment