如何在ngRepeat数组之间推送AngularJS中的对象

发布时间：2020-12-17 08:41:25 所属栏目：安全来源：网络整理

导读：所以我是新的AngularJS，我试图构建一个非常简单的列表应用程序，其中我可以创建一个ng-repeat项目列表，然后将一个选定的项目到另一个ng重复列表。虽然我的问题似乎很简单，我还是找不到一个合适的解决方案。所以这里是简化的标记： body ng-app="MyApp" d

所以我是新的AngularJS，我试图构建一个非常简单的列表应用程序，其中我可以创建一个ng-repeat项目列表，然后将一个选定的项目到另一个ng重复列表。虽然我的问题似乎很简单，我还是找不到一个合适的解决方案。

所以这里是简化的标记：

<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()函数触发器，它实际上是推动我的检查列表。但是，它似乎只是一个空对象。该函数无法获取我想推送的实际项目。

我在这里做错了什么？

注意：打算通过单击按钮检查项目。在这种情况下，我不想使用复选框。

你可以在这里看到工作模型：http://jsfiddle.net/7n8NR/1/

干杯，
诺曼

将方法更改为：

$scope.toggleChecked = function (index) {
    $scope.checked.push($scope.items[index]);
    $scope.items.splice(index,1);
};

Working Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!