如何在ngRepeat数组之间的AngularJS中推送对象
所以我是AngularJS的新手，我正在尝试构build一个非常简单的列表应用程序，我可以在其中创build一个ng-repeat项目列表，然后将所选项目推送到另一个ng-repeat列表中。 虽然我的问题似乎很简单，但我还是无法find合适的解决scheme。
所以这是简化的标记：
<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> 这里是我的AngularJS脚本：
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; }; });
所以，当我点击button，我的toggleChecked（）函数触发，它实际上将东西推入我的检查列表。 但是，这似乎只是一个空洞的对象。 该函数不能得到我想推的实际项目。
我在这里做错了什么？
注意：通过点击button检查项目的目的。 在这种情况下，我不想使用checkbox。
你可以在这里看到工作模式： http : //jsfiddle.net/7n8NR/1/
干杯，诺曼
将您的方法更改为：
$scope.toggleChecked = function (index) { $scope.checked.push($scope.items[index]); $scope.items.splice(index, 1); };
工作演示
在两个列表中使用相同的数组，并创buildangular度filter来实现您的目标会更好。
http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters
粗糙，未经testing的代码如下：
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 } });
和视图（我也添加了一个“取消”button）
<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 -->
然后你不需要在你的控制器中的切换方法等
试试这个也…
<!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>
