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

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

arrays angularjs

Arrays 如何在ngRepeat数组之间推送AngularJS中的对象,arrays,angularjs,controller,ng-repeat,Arrays,Angularjs,Controller,Ng Repeat,所以我是AngularJS的新手，我正在尝试构建一个非常简单的列表应用程序，在这里我可以创建一个ng重复项目列表，然后将所选项目推送到另一个ng重复项目列表中。虽然我的问题看起来很简单，但我还没有找到一个合适的解决方案下面是简化的标记： <body ng-app="MyApp"> <div id="MyApp" ng-controller="mainController"> <div id="AddItem"> <h3&g

所以我是AngularJS的新手，我正在尝试构建一个非常简单的列表应用程序，在这里我可以创建一个ng重复项目列表，然后将所选项目推送到另一个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>

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（）函数会触发，它实际上会将某些内容推送到我的选中列表中。然而，它似乎只是一个空的对象。函数无法获取我要推送的实际项目

我做错了什么

注意：通过点击按钮检查项目是有意的。我不想在这种情况下使用复选框

您可以在此处看到工作模型：

干杯，诺曼将您的方法更改为：

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

您最好对两个列表使用相同的数组，并创建角度过滤器以实现您的目标

未经测试的粗略代码如下：

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
    }
});

以及视图（我还添加了一个“取消选中”按钮）


添加项


添加到列表中
选中项：{{GetTotalCheckItems（）}}
选中的：
金额：{{item.amount}}-
名称：{{item.name}-
此项已检查！
取消选中项目
未选中的项：{{getTotalItems（）}}
未选中：
金额：{{item.amount}}-
名称：{{item.name}-
检查项目

那么你就不需要控制器中的切换方法等了

试试这个吧


单击按钮以连接两个阵列
试试看


函数myFunction（）{
var hege=[{
1:“塞西莉”，
2：“孤独”
}];
var stale=[{
1:“埃米尔”，
2.“托拜厄斯”
}];
var hege=hege.concat（过时）；
document.getElementById（“demo1”）.innerHTML=hege；
document.getElementById（“demo”）.innerHTML=stale；
}

起初我也想过类似的事情，但我担心随着项目变得更加复杂，我的控制器会变得太混乱。例如，如果我在“checked”和“unchecked”之外添加另一个状态，并在其他视图中重用具有不同状态的项，事情就会变得更加困难。在多个控制器中对我的项目进行排序可能会使我的代码更干净，并且在项目的后期我会更灵活。使用AngularJS避免dom中的javascript。

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