如何推ngRepeat阵列之间AngularJS对象 [英] How to push objects in AngularJS between ngRepeat arrays
问题描述
所以，我是新来AngularJS，我试图建立一个非常简单的应用程序列表，在那里我可以创建一个NG重复项目清单，然后按所选项目到另一个NG重复列表。虽然我的问题似乎很简单，我是不是能够找到一个妥善的解决办法呢。
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.
所以这里的简化的标记：
<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;
};
});
所以，当我按一下按钮，我toggleChecked（）函数，触发器和实际的东西推到我的检查清单。不过，这似乎只是一个空的对象。该功能不能得到，我要推实际的项目。
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.
我在做什么错在这里？
请注意：检查通过点击一个按钮项目旨在。我不想在这种情况下使用复选框。
NOTE: Checking items via click on a button is intended. I don't want to use checkboxes in this case.
您可以看到这里的工作模式： http://jsfiddle.net/7n8NR/1/
You can see the working model here: http://jsfiddle.net/7n8NR/1/
干杯，
诺曼
推荐答案
改变你的方法：
$scope.toggleChecked = function (index) {
$scope.checked.push($scope.items[index]);
$scope.items.splice(index, 1);
};
Working Demo
这篇关于如何推ngRepeat阵列之间AngularJS对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
