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

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.

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

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:

这里是我的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;
};
});

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.

当我点击按钮时，我的toggleChecked()函数就会触发，它会将一些东西推入我的检查列表。然而，它似乎只是一个空对象。函数不能得到我要推送的实际项目。

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/

您可以在这里看到工作模型:http://jsfiddle.net/8nr/1/。

Cheers, Norman

欢呼,诺曼

3 个解决方案

#1

change your method to:

改变你的方法:

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

Working Demo

演示工作

#2

You'd be much better off using the same array with both lists, and creating angular filters to achieve your goal.

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

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

Rough, untested code follows:

粗糙,未测试的代码如下:

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

and the view (i added an "uncheck" button too)

以及视图(我还添加了一个“uncheck”按钮)

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

Then you dont need the toggle methods etc in your controller

那么您就不需要在控制器中使用toggle方法等

#3

-6

Try this one also...

试试这个也……

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

#1