Jak przesuwać obiekty w AngularJS między tablicami ngRepeat

Tak więc jestem nowy w AngularJS i staram się stworzyć bardzo prostą aplikację listy, w której mogę utworzyć listę elementów z powtórzeniami ng, a następnie wcisnąć wybrany element do innego Lista powtórzeń. Chociaż mój problem wydaje się być bardzo prosty, nie byłem w stanie znaleźć odpowiedniego rozwiązania.Jak przesuwać obiekty w AngularJS między tablicami ngRepeat

Więc oto uproszczony 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>

I tu wychodzi moja angularjs Scenariusz:

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

Więc kiedy klikam przycisk, mój toggleChecked() funkcja uruchamia i faktycznie popycha coś na moją zaznaczoną listę. Jednak wydaje się być po prostu pustym obiektem. Funkcja nie może uzyskać rzeczywistego elementu, który chcę nacisnąć.

Co ja tu robię źle?

UWAGA: Sprawdzanie pozycji za pomocą kliknięcia przycisku jest zamierzone. Nie chcę w tym przypadku używać pól wyboru.

można zobaczyć model pracy tutaj: http://jsfiddle.net/7n8NR/1/

Wiwaty, Norman

Źródło

2013-06-13 VoodooDS

zmienić metodę do:

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

Working Demo

Źródło

2013-06-13 22:44:41 WooCaSh

Byłbyś wiele lepiej off przy użyciu tej samej tablicy z obu list i tworzenia angul ar filtry, aby osiągnąć swój cel.

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

surowca, kod wypróbowane następujące:

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

i widok (I dodaje "usuń przycisk" zbyt)

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

Wtedy nie trzeba metod zatrzaskowych itp w kontrolerze

Źródło

2013-06-14 05:33:50 ricick

myślałem o czymś podobnym w pierwszym, ale obawiam się, że mój kontroler byłby zbyt brudny, ponieważ projekt staje się bardziej złożony. Na przykład, gdybym dodał inny stan oprócz "sprawdzonych" i "niezaznaczonych" i ponownie użył elementów z różnymi stanami w innych widokach, sprawy stałyby się trudniejsze. Utrzymywanie moich produktów w wielu kontrolerach prawdopodobnie spowoduje, że mój kod będzie bardziej czysty, a ja będę bardziej elastyczny w dalszej części projektu. – VoodooDS

-6

Spróbuj też ...

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

Źródło

2015-06-17 13:54:35

Unikaj javascript w domenie z AngularJS. –

Jak przesuwać obiekty w AngularJS między tablicami ngRepeat

Odpowiedz

Powiązane problemy