Angular Latest: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<div ng-controller="MyCtrl">
<input type="text" ng-model="foobar[$index].id" ng-repeat="foo in foobar" watch-order />
</div>
CSS
.popup {
background: gray;
margin: 10px auto;
}
.popup.large { width: 80%; }
.popup.small { width: 50%; }
.popup .title {
font-size: 2em;
}
JavaScript
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.foobar = [{
height: "66.0",
id: "3",
left: "70.86599731445312",
readingOrder: "3",
top: "268.4520017089843",
width: "156.1179962158203"
}, {
height: "66.093994140625",
id: "4",
left: "240.94900512695312",
readingOrder: "4",
top: "268.4520017089843",
width: "155.9219970703125"
}, {
height: "75.7080078125",
id: "5",
left: "240.94000244140625",
readingOrder: "5",
top: "528.0369931640624",
width: "155.93099975585938"
}, {
height: "211.10199999999998",
id: "0",
left: "69.79990000000001",
readingOrder: "0",
top: "49.96199999999999",
width: "157.90200000000002"
},{
height: "236.69299999999998",
id: "1",
left: "70.8661",
readingOrder: "1",
top: "365.2444999999999",
width: "155.51399999999995"
},{
height: "209.00799999999998",
id: "2",
left: "240.945",
readingOrder: "2",
top: "51.024",
width: "155.906"
}];
$scope.$watch('foobar', function (newVal, oldVal) {
// angular.forEach(newval,function(key){
// key
// })
var oldValue = oldVal;
var newValue = newVal;
var traceIndex;
var cloneOld = oldValue.slice(0);
angular.forEach(cloneOld,function(key,index){
if(event.currentTarget.value === key.id){
traceIndex = index;
}
});
for(var i = 0;i< oldValue.length;i++){
for(var j = 0; j< newValue.length;j++){
if(newValue[j].id != oldValue[i].id && event.currentTarget.value){
var newID = newValue[j].id;
cloneOld[j].id = newID;
var oldID = oldValue[i].id;
cloneOld[j].readingOrder = newID;
cloneOld[traceIndex].id = oldID;
cloneOld[traceIndex].readingOrder = oldID;
console.log(cloneOld);
break;
}
}
}
},...