web-dev-qa-db-fra.com

Comment insérer des objets dans AngularJS entre des tableaux ngRepeat

Donc, je suis nouveau dans AngularJS et j'essaie de créer une application de liste très simple, dans laquelle je peux créer une liste d'éléments à répéter, puis ajouter un élément sélectionné à une autre liste de répétitions. Bien que mon problème semble être très simple, je n’étais pas encore en mesure de trouver une solution adéquate.

Alors voici le balisage simplifié: 

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

Et voici mon 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;
};
});

Ainsi, lorsque je clique sur le bouton, ma fonction toggleChecked () se déclenche et pousse réellement quelque chose dans ma liste cochée. Cependant, il semble que ce ne soit qu'un objet vide. La fonction ne peut pas obtenir l'élément réel que je veux pousser.

Qu'est-ce que je fais mal ici?

REMARQUE: La vérification des éléments en cliquant sur un bouton est prévue. Je ne veux pas utiliser les cases à cocher dans ce cas.

Vous pouvez voir le modèle de travail ici: http://jsfiddle.net/7n8NR/1/

À la vôtre, Norman

arraysangularjscontrollerng-repeat
34
VoodooDS

changez votre méthode pour:

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

Démo de travail

34
WooCaSh

Vous feriez bien mieux d'utiliser le même tableau avec les deux listes et de créer des filtres angular) pour atteindre votre objectif.

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

Le code brut non testé suit:

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

et la vue (j'ai ajouté un bouton "décocher" aussi)

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

Ensuite, vous n’avez pas besoin des méthodes de basculement, etc. dans votre contrôleur

7
ricick