dynamic ng-repeat with dynamic array

Question

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?

Don't use ngModel if you don't want the model updated dynamically. Instead, use a custom directive to get the inputs' values and pass them to your functions. — isherwood
– isherwood, Commented Apr 8, 2016 at 17:47

Zhiliang Xing · Accepted Answer · 2016-04-08 17:57:07Z

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>

NeiL · Accepted Answer · 2016-04-08 17:50:35Z

0

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

answered Apr 8, 2016 at 17:50

NeiL

80110 silver badges38 bronze badges

Collectives™ on Stack Overflow

dynamic ng-repeat with dynamic array

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related