34

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

乾杯、ノーマン

4

3 に答える 3

-6

これも試してみてください...

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

于 2015-06-17T13:54:35.273 に答える