Come spingere gli oggetti in AngularJS tra gli array ngRepeat

Quindi sono nuovo di AngularJS e sto provando a creare una semplice lista di app, dove posso creare un elenco di voci ng-repeat e poi spingere un oggetto selezionato in un altro ng-repeat list. Anche se il mio problema sembra essere molto semplice, non sono ancora riuscito a trovare una soluzione adeguata.Come spingere gli oggetti in AngularJS tra gli array ngRepeat

Quindi, ecco la markup semplificato:

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

E qui va il mio AngularJS Script:

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

Così, quando si fa clic sul pulsante, il mio toggleChecked() funzione attiva e in realtà spinge qualcosa nella mia lista di controllo. Tuttavia, sembra essere solo un oggetto vuoto. La funzione non può ottenere l'oggetto effettivo che voglio spingere.

Cosa sto facendo di sbagliato qui?

NOTA: il controllo degli articoli tramite clic su un pulsante è previsto. Non voglio usare le checkbox in questo caso.

Potete vedere il modello di lavoro qui: http://jsfiddle.net/7n8NR/1/

Cheers, Norman

fonte

2013-06-13 VoodooDS

cambiare il metodo di:

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

Working Demo

fonte

2013-06-13 22:44:41 WooCaSh

Sareste molto meglio off usando lo stesso array con entrambi gli elenchi e creando angul ar filtri per raggiungere il tuo obiettivo.

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

ruvida, codice non testato segue:

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

e la vista (ho aggiunto un "deselezionare" pulsante troppo)

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

Allora non avete bisogno di metodi ginocchiera ecc nel controller

fonte

2013-06-14 05:33:50 ricick

ho pensato a qualcosa di simile in un primo momento, ma temo che il mio controller diventerebbe troppo disordinato mentre il progetto diventa più complesso. Ad esempio, se aggiungessi un altro stato oltre a "selezionato" e "deselezionato" e riutilizzassi gli elementi con stati diversi in altre viste, le cose diventerebbero più difficili. Mantenere i miei articoli ordinati in più controller probabilmente manterrà il mio codice più pulito e sono più flessibile più avanti nel progetto. – VoodooDS

-6

Prova anche questo ...

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

fonte

2015-06-17 13:54:35

Evitare javascript nella dom con AngularJS. –

Come spingere gli oggetti in AngularJS tra gli array ngRepeat

risposta

Problemi correlati