CODEWITHSUNDEEP
angularjs
user3044394
user3044394

Reputation: 135

dynamic ng-repeat with dynamic array

I'm trying to populate an array then use ng-repeat to display the information inside of it.The problem is that the data being shown is based off of what is currently written to the input fields inside of <div class=cardNew>. In fact, after some console logging I've found that every single object inside of the array is exactly the same as what is being typed into those input fields. Here is the 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>

and the controller:

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

I want the array content to remain static until I call the add() or delete() functions. I know I'm looking at this the wrong way, but I'm stumped. Could anyone point me in the right direction or let me know what I'm doing wrong?

Upvotes: 0

Views: 3630

Answers (2)

Zhiliang Xing
Zhiliang Xing

Reputation: 1057

change $scope.cardList.unshift($scope.card); to $scope.cardList.unshift(angular.copy($scope.card)); otherwise each element you pushed into the array is still bind with the $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>

Upvotes: 1

NeiL
NeiL

Reputation: 801

I think you need to $scope.$apply() . It will reflect the change in ui. For example : 

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

Upvotes: 0

Related Questions