如何在 ngRepeat 数组之间推送 AngularJS 中的对象
[英] How to push objects in AngularJS between ngRepeat arrays
本文介绍了如何在 ngRepeat 数组之间推送 AngularJS 中的对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我是 AngularJS 的新手，我正在尝试构建一个非常简单的列表应用程序，我可以在其中创建一个 ng-repeat 项目列表，然后将所选项目推送到另一个 ng-repeat 列表中.虽然我的问题似乎很简单，但我还没有找到合适的解决方案.
这里是简化的标记:
<div id="MyApp" ng-controller="mainController"><div id="AddItem"><h3>添加项目</h3><input value="1" type="number" placeholder="1" ng-model="itemAmount"><input value="" type="text" placeholder="项目名称" ng-model="itemName"><br/><button ng-click="addItem()">添加到列表</button>
<!-- 开始:检查项目列表--><div id="CheckedList"><h3>检查项目:{{getTotalCheckedItems()}}</h3><h4>检查:</h4><表格><tr ng-repeat="选中的项目" class="item-checked"><td><b>数量:</b>{{item.amount}} -</td><td><b>名称:</b>{{item.name}} -</td><td><i>此项目已选中！</i></td></tr>
<!-- 结束:检查项目列表--><!-- 开始:未检查项目列表--><div id="UncheckedList"><h3>未选中的项目:{{getTotalItems()}}</h3><h4>未选中:</h4><表格><tr ng-repeat="项目中的项目" class="item-unchecked"><td><b>数量:</b>{{item.amount}} -</td><td><b>名称:</b>{{item.name}} -</td><td><button ng-click="toggleChecked($index)">检查项目</button></td></tr>
<!-- 结束:物品清单-->
这是我的 AngularJS 脚本:
var app = angular.module("MyApp", []);app.controller("mainController",功能($范围){//项目列表数组$scope.items = [];$scope.checked = [];//向列表中添加一个项目$scope.addItem = 函数 () {$scope.items.push({金额:$scope.itemAmount，名称:$scope.itemName});//推送后清除输入字段$scope.itemAmount = "";$scope.itemName = "";};//将项目添加到选中列表并从未选中列表中删除$scope.toggleChecked = 函数(项目，索引){$scope.checked.push(item);$scope.items.splice(index, 1);};//获取总项目$scope.getTotalItems = 函数 () {返回 $scope.items.length;};//获取总检查项$scope.getTotalCheckedItems = 函数 () {返回 $scope.checked.length;};});
因此，当我单击按钮时，我的 toggleChecked() 函数会触发，它实际上会将某些内容推送到我的选中列表中.然而，它似乎只是一个空对象.该函数无法获取我要推送的实际项目.
我在这里做错了什么?
注意:旨在通过单击按钮来检查项目.在这种情况下，我不想使用复选框.
您可以在此处查看工作模型:http://jsfiddle.net/7n8NR/1/
干杯，诺曼
解决方案
将您的方法更改为:
$scope.toggleChecked = 函数(索引){$scope.checked.push($scope.items[index]);$scope.items.splice(index, 1);};
工作演示
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
解决方案
change your method to:
$scope.toggleChecked = function (index) {
$scope.checked.push($scope.items[index]);
$scope.items.splice(index, 1);
};
Working Demo
这篇关于如何在 ngRepeat 数组之间推送 AngularJS 中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
