web-dev-qa-db-ja.com

ngRepeat配列間でAngularJSのオブジェクトをプッシュする方法

だから私は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/

乾杯、ノーマン

arraysangularjscontrollerng-repeat
34
VoodooDS

メソッドを次のように変更します。

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

ワーキングデモ

34
WooCaSh

両方のリストで同じ配列を使用し、目的を達成するためにangularフィルターを作成する方がはるかに良いでしょう。

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

次に、コントローラーにトグルメソッドなどは必要ありません

7
ricick