How to push objects in AngularJS between ngRepeat arrays
change your method to:
$scope.toggleChecked = function (index) { $scope.checked.push($scope.items[index]); $scope.items.splice(index, 1);};
You'd be much better off using the same array with both lists, and creating angular filters to achieve your goal.
http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters
Rough, untested code follows:
appModule.filter('checked', function() { return function(input, checked) { if(!input)return input; var output = [] for (i in input){ var item = input[i]; if(item.checked == checked)output.push(item); } return output }});
and the view (i added an "uncheck" button too)
<div id="AddItem"> <h3>Add Item</h3> <input value="1" type="number" placeholder="1" ng-model="itemAmount"> <input value="" type="text" placeholder="Name of Item" ng-model="itemName"> <br/> <button ng-click="addItem()">Add to list</button></div><!-- begin: LIST OF CHECKED ITEMS --><div id="CheckedList"> <h3>Checked Items: {{getTotalCheckedItems()}}</h3> <h4>Checked:</h4> <table> <tr ng-repeat="item in items | checked:true" class="item-checked"> <td><b>amount:</b> {{item.amount}} -</td> <td><b>name:</b> {{item.name}} -</td> <td> <i>this item is checked!</i> <button ng-click="item.checked = false">uncheck item</button> </td> </tr> </table></div><!-- end: LIST OF CHECKED ITEMS --><!-- begin: LIST OF UNCHECKED ITEMS --><div id="UncheckedList"> <h3>Unchecked Items: {{getTotalItems()}}</h3> <h4>Unchecked:</h4> <table> <tr ng-repeat="item in items | checked:false" class="item-unchecked"> <td><b>amount:</b> {{item.amount}} -</td> <td><b>name:</b> {{item.name}} -</td> <td> <button ng-click="item.checked = true">check item</button> </td> </tr> </table></div><!-- end: LIST OF ITEMS -->
Then you dont need the toggle methods etc in your controller
Try this one also...
<!DOCTYPE html><html><body> <p>Click the button to join two arrays.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <p id="demo1"></p> <script> function myFunction() { var hege = [{ 1: "Cecilie", 2: "Lone" }]; var stale = [{ 1: "Emil", 2: "Tobias" }]; var hege = hege.concat(stale); document.getElementById("demo1").innerHTML = hege; document.getElementById("demo").innerHTML = stale; } </script></body></html>