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

【问题标题】：How to push objects in AngularJS between ngRepeat arrays如何在 ngRepeat 数组之间推送 AngularJS 中的对象
【发布时间】：2013-06-10 11:50:19
【问题描述】：

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

下面是简化的标记：

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

干杯，诺曼

【问题讨论】：

标签： arrays angularjs controller ng-repeat

【解决方案1】：

改变你的方法：

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

Working Demo

【讨论】：

【解决方案2】：

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

http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

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

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

和视图（我也添加了一个“取消选中”按钮）

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

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

【讨论】：

一开始我也想过类似的事情，但我担心随着项目变得越来越复杂，我的控制器会变得太乱。例如，如果我要添加除“选中”和“未选中”之外的另一个状态，并在其他视图中重用具有不同状态的项目，事情会变得更加困难。让我的项目在多个控制器中排序可能会使我的代码更干净，并且我在项目的后期会更灵活。

【解决方案3】：

也试试这个...

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

【讨论】：

使用 AngularJS 避免 dom 中的 javascript。