Wie man Objekte in AngularJS zwischen ngRepeat Arrays verschiebt

Also ich bin neu in AngularJS und ich versuche, eine sehr einfache Liste App zu erstellen, wo ich eine ng-Wiederholung Artikelliste erstellen und dann ein ausgewähltes Element in ein anderes schieben kann ng-Wiederholungsliste. Obwohl mein Problem sehr einfach zu sein scheint, konnte ich noch keine richtige Lösung finden.Wie man Objekte in AngularJS zwischen ngRepeat Arrays verschiebt

hier ist also die vereinfachte 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>

Und hier geht mein AngularJS Drehbuch:

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

Also, wenn ich auf die Schaltfläche klicken, meine Togglechecked() Funktion löst und es schiebt tatsächlich etwas in meine überprüfte Liste. Es scheint jedoch nur ein leeres Objekt zu sein. Die Funktion kann nicht den tatsächlichen Artikel abrufen, den ich pushen möchte.

Was mache ich hier falsch?

HINWEIS: Das Überprüfen von Elementen über einen Klick auf eine Schaltfläche ist beabsichtigt. Ich möchte in diesem Fall keine Checkboxen verwenden.

Sie können das Arbeitsmodell siehe hier: http://jsfiddle.net/7n8NR/1/

Cheers, Norman

Quelle

2013-06-13 VoodooDS

ändern Ihre Methode:

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

Working Demo

Quelle

2013-06-13 22:44:41 WooCaSh

Sie würden viel besser Verwenden Sie dasselbe Array mit beiden Listen und erstellen Sie angul Filter, um Ihr Ziel zu erreichen.

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

Rau, ungetestete Code folgt:

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

und die Ansicht (i addiert eine "deaktivieren", um zu)

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

Dann müssen Sie nicht dieses man die Toggle-Methoden usw. in Ihrem Controller benötigen auch

Quelle

2013-06-14 05:33:50 ricick

Ich dachte an etwas zunächst ähnlich, aber ich fürchte, Mein Controller würde zu unordentlich werden, wenn das Projekt komplexer wird. Wenn ich zum Beispiel einen anderen Zustand neben "markiert" und "nicht markiert" hinzufügen und Elemente mit anderen Zuständen in anderen Ansichten wiederverwenden würde, würde es schwieriger werden. Wenn ich meine Artikel in mehreren Controllern sortiere, wird mein Code wahrscheinlich sauberer und ich bin später flexibler im Projekt. – VoodooDS

-6

Versuchen ...

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

Quelle

2015-06-17 13:54:35

Vermeiden Sie Javascript in der Dom mit AngularJS. –

Wie man Objekte in AngularJS zwischen ngRepeat Arrays verschiebt

Antwort

Verwandte Themen