Question

我尝试填充数组，然后使用ng-repeat显示其中的信息。问题是显示的数据基于当前写入{{内部的输入字段的内容。 1}}。事实上，在一些控制台记录之后，我发现数组中的每个对象与输入到这些输入字段的对象完全相同。这是html：

<div class=cardNew>

和控制器：

<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>

我希望数组内容保持静态，直到我调用add（）或delete（）函数。我知道我以错误的方式看着这个，但我很难过。任何人都可以指出我正确的方向或让我知道我做错了什么？

Answer 1

将$scope.cardList.unshift($scope.card);更改为$scope.cardList.unshift(angular.copy($scope.card));否则您推送到数组中的每个元素仍然与$scope.card

绑定

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我认为您需要$scope.$apply()。它将反映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();
    };

动态数组的动态ng-repeat

2 个答案: