ダイナミックアレイを使用したダイナミックリピート

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

私は配列の内容は、私が追加（呼び出すまで静的なまま）または（）関数を削除したいです。私はこれを間違った方法で見ていることを知っていますが、私は困惑しています。誰かが正しい方向に私を指すか、私が間違っていることを教えてもらえますか？

Answer 1

そうでなければ、配列の中に押し込ま各要素はまだ私はあなたが$scope.$apply()に必要だと思う$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.cardList.unshift($scope.card);$scope.cardList.unshift(angular.copy($scope.card));に変更。それはuiの変化を反映します。 例：

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