如何在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/

干杯,诺曼

  • 如何在AngularJS中用ng-repeatdynamic生成ng-model =“my _ {{$ index}}”?
  • Angular ng-repeat每3或4列添加bootstrap行
  • 什么是ng-repeat指令的优先级可以改变它?
  • 元素中的Ang-ng重复条件包装项(ng-repeat中的组项)
  • 在ng-repeat里面添加参数到ng-click函数似乎不起作用
  • ng-repeat定义的次数,而不是重复的数组?
  • Angular.js。 如何计算满足自定义filter的ng-repeat迭代
  • ng-repeat:单个字段过滤
  • 3 Solutions collect form web for “如何在ngRepeat数组之间的AngularJS中推送对象”

    将您的方法更改为:

     $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>