动态ng-repeat与动态数组

Question

我想填充一个数组，然后使用ng-repeat来显示它里面的信息。问题是所显示的数据是基于当前写入输入的内容<div class=cardNew>内的字段。事实上，在一些控制台日志记录之后，我发现数组内的每个对象都与输入到这些输入字段中的内容完全相同。下面是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> 

和控制器：

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

我想要的数组的内容保持不变，直到我调用add（）或删除（）函数。我知道我正在看这个错误的方式，但我很难过。任何人都可以指向正确的方向，或让我知道我做错了什么？

Answer 1

变化$scope.cardList.unshift($scope.card);到$scope.cardList.unshift(angular.copy($scope.card));否则每次推入数组元素仍与$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

我想你需要$scope.$apply()绑定。它将反映用户界面的变化。 例如：

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