dynamic ng-repeat mit dynamischem Array

Question

Ich versuche, ein Array aufzufüllen und dann ng-repeat zu verwenden, um die darin enthaltenen Informationen anzuzeigen. Das Problem ist, dass die angezeigten Daten auf dem basieren, was gerade in die Eingabe geschrieben wird Felder innerhalb von <div class=cardNew>. Tatsächlich habe ich nach einiger Konsolenprotokollierung festgestellt, dass jedes einzelne Objekt innerhalb des Arrays exakt mit dem übereinstimmt, was in diese Eingabefelder eingegeben wird. Hier ist die html:

<div class="cardFirstContainer"> 
    <div class="cardNew"> 
     <input type="number" class="cardNumber" ng-model="card.number" name="numberInput"> 
     <input type="input" class="cardEpic" ng-model="card.epic" name="epicInput"> 
     <input type="input" class="cardName" ng-model="card.name" name="cardInput"> 
     <input type="number" class="form-control" ng-model="card.points" name="pointInput"> 
    </div> 
    <div class="cardControlsContainer"> 
     <input type="buton" value="Add" ng-click="addCard()" > 
     <input type="buton" value="Finish" ng-click="finish()" > 
     <input type="buton" value="Finish" ng-click="test()" > 
    </div> 
</div> 

<div ng-repeat="x in cardList track by $index" class="cardListContainer"> 
    <div class="cardCreated"> 
     <div class="cardNumber">{{ x.number }}</div> 
     <div class="cardEpic">{{ x.epic }}</div> 
     <div class="cardName">{{ x.name }}</div> 
     <div class="cardPoints">{{ x.points }}</div> 
    </div> 
    <div class="cardControls"> 
     <input type="button" value="Delete" ng-click="delete(card)" > 
    </div> 
</div> 

und die Steuerung:

mainApp.controller('mainController', function($scope, pageBean) { 
    $scope.title = ''; 
    $scope.card = { 
     number: '', 
     epic: '', 
     name: '', 
     points: 1 
    }; 
    $scope.cardList = []; 
    $scope.addCard = function(){ 
     $scope.cardList.unshift($scope.card); 
     pageBean.setCardList(cardList); 
     $scope.card.number = ''; 
     $scope.card.epic = ''; 
     $scope.card.name = ''; 
     $scope.card.points = 1; 
     console.log($scope.cardList); 
    }; 

    $scope.delete = function(card){ 
     var index = $scope.cardList.indexOf(card); 
     $scope.cardList.splice(index, 1); 
     console.log($scope.cardList); 
    }; 

    $scope.finish = function(){ 
     window.location.href = "#cardPrint"; 
    }; 

    $scope.test = function(){ 
     console.log($scope.cardList); 
    }; 
}); 

ich das Array Inhalt wollen statisch bleiben, bis ich das Add() aufrufen oder löschen() Funktionen. Ich weiß, dass ich das falsch sehe, aber ich bin ratlos. Kann mir jemand in die richtige Richtung zeigen oder mich wissen lassen, was ich falsch mache?

Answer 1

Änderung $scope.cardList.unshift($scope.card);-$scope.cardList.unshift(angular.copy($scope.card)); sonst jedes Element, das Sie in das Feld geschoben noch mit dem $scope.card

function TodoCtrl($scope) { 
 
    $scope.title = ''; 
 
    $scope.card = { 
 
    number: '', 
 
    epic: '', 
 
    name: '', 
 
    points: 1 
 
    }; 
 
    $scope.cardList = []; 
 
    $scope.addCard = function() { 
 
    $scope.cardList.unshift(angular.copy($scope.card)); 
 
    $scope.card.number = ''; 
 
    $scope.card.epic = ''; 
 
    $scope.card.name = ''; 
 
    $scope.card.points = 1; 
 
    console.log($scope.cardList); 
 
    }; 
 

 
    $scope.delete = function(card) { 
 
    var index = $scope.cardList.indexOf(card); 
 
    $scope.cardList.splice(index, 1); 
 
    console.log($scope.cardList); 
 
    }; 
 

 
    $scope.finish = function() { 
 
    window.location.href = "#cardPrint"; 
 
    }; 
 

 
    $scope.test = function() { 
 
    console.log($scope.cardList); 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <h2>$q test</h2> 
 
    <div ng-controller="TodoCtrl"> 
 
    <div class="cardFirstContainer"> 
 
     <div class="cardNew"> 
 
     <input type="number" class="cardNumber" ng-model="card.number" name="numberInput"> 
 
     <input type="input" class="cardEpic" ng-model="card.epic" name="epicInput"> 
 
     <input type="input" class="cardName" ng-model="card.name" name="cardInput"> 
 
     <input type="number" class="form-control" ng-model="card.points" name="pointInput"> 
 
     </div> 
 
     <div class="cardControlsContainer"> 
 
     <input type="buton" value="Add" ng-click="addCard()"> 
 
     <input type="buton" value="Finish" ng-click="finish()"> 
 
     <input type="buton" value="Finish" ng-click="test()"> 
 
     </div> 
 
    </div> 
 

 
    <div ng-repeat="x in cardList track by $index" class="cardListContainer"> 
 
     <div class="cardCreated"> 
 
     <div class="cardNumber">{{ x.number }}</div> 
 
     <div class="cardEpic">{{ x.epic }}</div> 
 
     <div class="cardName">{{ x.name }}</div> 
 
     <div class="cardPoints">{{ x.points }}</div> 
 
     </div> 
 
     <div class="cardControls"> 
 
     <input type="button" value="Delete" ng-click="delete(card)"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie $scope.$apply() brauchen Ich denke, binden wird. Es wird die Veränderung in ui widerspiegeln. Zum Beispiel:

$scope.addCard = function(){ // use $scope.apply() here in this function 
     $scope.cardList.unshift($scope.card); 
     pageBean.setCardList(cardList); 
     $scope.card.number = ''; 
     $scope.card.epic = ''; 
     $scope.card.name = ''; 
     $scope.card.points = 1; 
     console.log($scope.cardList); 
$scope.apply(); 
    };