Ng-repeat double join

Question

For some reason, when I concatenate an object in my ng-repeat array, it doubles what I insert and hide the last object in the array.

However, if I click on the toggle switch and “update” ng-repeat , it will display the correct data.

Does anyone know why this is happening and what can I do to fix it?

 angular.module('app', []) .controller('ctrl', function($scope) { $scope.workflow = { flow: [{ "id": "1334f68db820f664", "step_number": 1, "tasks": [{ "id": "1334f68e3f20f665" }] }, { "id": "134967a5ba205f5b", "step_number": 2, "tasks": [{ "id": "134972c5b420e027" }] }, { "id": "1334f68e7d209ae6", "step_number": 3, "tasks": [{ "id": "1334f68ef6209ae7" }] }] }; $scope.insertStep = function() { var insertStepIndex = 1, task_data = { "id": null, "step_number": (insertStepIndex + 2), "tasks": [] }; //go through each item in the array $.each($scope.workflow.flow, function(index, step) { //if the step number is greater then the place you want to insert it into, increase the step numbers if (step.step_number > $scope.workflow.flow[insertStepIndex].step_number) step.step_number++; }); $scope.workflow.flow.splice((insertStepIndex + 1), 0, task_data); } $scope.toggleHide = function() { $scope.hide = !$scope.hide; } }); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script> <div ng-app="app" ng-controller="ctrl"> <div ng-click="insertStep()">Insert Step</div> <br /> <br /> <div ng-click="toggleHide()">Toggle Repeat</div> <br /> <br /> <div ng-if="!hide"> <div ng-repeat="data in workflow.flow | orderBy:'+step_number'" ng-init="$stepIndex = workflow.flow.indexOf(data)"> {{ workflow.flow[$stepIndex].step_number }} </div> </div> </div> 

Answer 1

I have a problem. This is the difficult but simple part. The ng-init directive is executed only once. Thus, your assignment $stepIndex = workflow.flow.indexOf(data) will not be updated when new data is clicked into the array / list.

Thus, adding a scope function will fix this problem, since Angular will automatically call the function when the value is returned.

 angular.module('app', []) .controller('ctrl', function($scope) { $scope.workflow = { flow: [{ "id": "1334f68db820f664", "step_number": 1, "tasks": [{ "id": "1334f68e3f20f665" }] }, { "id": "134967a5ba205f5b", "step_number": 2, "tasks": [{ "id": "134972c5b420e027" }] }, { "id": "1334f68e7d209ae6", "step_number": 3, "tasks": [{ "id": "1334f68ef6209ae7" }] }] }; $scope.insertStep = function() { var insertStepIndex = 1 var task_data = { "id": null, "step_number": (insertStepIndex + 2), "tasks": [] }; //go through each item in the array angular.forEach($scope.workflow.flow, function(step, index) { //if the step number is greater then the place you want to insert it into, increase the step numbers if (step.step_number > $scope.workflow.flow[insertStepIndex].step_number) step.step_number++; }); $scope.workflow.flow.splice((insertStepIndex + 1), 0, task_data); } // This is a new function which I added to fix the problem $scope.getIndex = function(data) { return $scope.workflow.flow.indexOf(data); }; $scope.toggleHide = function() { $scope.hide = !$scope.hide; }; }); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script> <div ng-app="app" ng-controller="ctrl"> <div ng-click="insertStep()">Insert Step</div> <br /> <br /> <div ng-click="toggleHide()">Toggle Repeat</div> <br /> <br /> <div ng-if="!hide"> <div ng-repeat="data in workflow.flow | orderBy:'+step_number'"> {{ workflow.flow[getIndex(data)].step_number }} </div> </div> </div>