Menu
So I'm new to AngularJS and I'm trying to build a very simple list app, where I can create an ng-repeat item list and then push a selected item into another ng-repeat list. Although my problem seems to be very simple I wasn't able to find a proper solution yet.
So here's the simplified markup:
<body ng-app="MyApp"> <div id="MyApp" ng-controller="mainController"> <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 checked" class="item-checked"> <td><b>amount:</b> {{item.amount}} -</td> <td><b>name:</b> {{item.name}} -</td> <td> <i>this item is checked!</i> </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" class="item-unchecked"> <td><b>amount:</b> {{item.amount}} -</td> <td><b>name:</b> {{item.name}} -</td> <td> <button ng-click="toggleChecked($index)">check item</button> </td> </tr> </table> </div> <!-- end: LIST OF ITEMS --> </div> </body> And here goes my AngularJS Script:
var app = angular.module("MyApp", []); app.controller("mainController", function ($scope) { // Item List Arrays $scope.items = []; $scope.checked = []; // Add a Item to the list $scope.addItem = function () { $scope.items.push({ amount: $scope.itemAmount, name: $scope.itemName }); // Clear input fields after push $scope.itemAmount = ""; $scope.itemName = ""; }; // Add Item to Checked List and delete from Unchecked List $scope.toggleChecked = function (item, index) { $scope.checked.push(item); $scope.items.splice(index, 1); }; // Get Total Items $scope.getTotalItems = function () { return $scope.items.length; }; // Get Total Checked Items $scope.getTotalCheckedItems = function () { return $scope.checked.length; }; }); So when I click the button, my toggleChecked() function triggers and it actually pushes something into my checked list. However, it seems to be just an empty object. The function can't get the actual item that I want to push.
What am I doing wrong here?
NOTE: Checking items via click on a button is intended. I don't want to use checkboxes in this case.
You can see the working model here: http://jsfiddle.net/7n8NR/1/
Cheers, Norman
281
The arr. push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the array & returns the new length of the modified array.
How do you push an array of objects into another array? Use the concat function, like so: var arrayA = [1, 2]; var arrayB = [3, 4]; var newArray = arrayA. concat(arrayB); The value of newArray will be [1, 2, 3, 4] ( arrayA and arrayB remain unchanged; concat creates and returns a new array for the result).
AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
change your method to:
$scope.toggleChecked = function (index) { $scope.checked.push($scope.items[index]); $scope.items.splice(index, 1); }; Working Demo
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
