How to push objects in AngularJS between ngRepeat arrays How to push objects in AngularJS between ngRepeat arrays angularjs angularjs

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);};

Working Demo


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>