javascript - 如何在angular js的重复中间停止ng-repeat

Question

我正在尝试构建一个井字游戏，但在样式方面遇到了问题。我有一个用于所有 9 个方 block 的 ng-repeat，并且需要在每第 3 个方 block 之后添加一个 div，以便可以构建下一行。我正在按照文档中的说明使用 ng-repeat-end 但我不确定我做错了什么。

<p>Turn: <span ng-bind="vm.turn"></span></p>
<div class="container" ng-repeat="square in vm.squares track by square.id">
    <div class="square" ng-bind="square.piece" ng-click="vm.move(square.id)"></div>
</div>
<div ng-repeat-end class="row-divider" ng-if="!(square.id % 3)"></div>
<div>
<button class="btn btn-primary" click="newGame()">New game</button>

.square {
  border: 1px solid #000;
  width: 50px;
  height: 50px;
  float: left;
}

.row-divider {
  clear: both;
  display:block;
}


angular
.module('app')
.directive('ticTacToe', function(){
  return {
    restrict: 'E',
    templateUrl: 'tic-tac-toe.html',
    controller: TicTacToeController,
    controllerAs: 'vm'
  };

TicTacToeController.$inject = [];

function TicTacToeController(){
  var vm = this;
  vm.turn = 0;
  let currentPiece = 'X';
  vm.squares = [
    { id: 1, piece: null },
    { id: 2, piece: null },
    { id: 3, piece: null },
    { id: 4, piece: null },
    { id: 5, piece: null },
    { id: 6, piece: null },
    { id: 7, piece: null },
    { id: 8, piece: null },
    { id: 9, piece: null }
    ];
  vm.move = function(squareId) {
    console.log('click');
    let index = squareId - 1;
    currentPiece = vm.turn % 2 === 0 ? 'X' : 'O';
    vm.squares[index].piece = currentPiece;
    vm.turn++;
  };
  vm.newGame = function(){
    vm.turn = 0;
  }
};

})

这是代码:https://plnkr.co/edit/XGhX5zVWCjSnn3OaKNQ6?p=preview

Answer 1

您需要从 ng-repeat-start 开始。

参见 plunker https://plnkr.co/edit/jck226trFWnxGuWNuu02?p=preview

<p>Turn: <span ng-bind="vm.turn"></span></p>
<div class="container" ng-repeat-start="square in vm.squares track by square.id">
  <div class="square" ng-bind="square.piece" ng-click="vm.move(square.id)"></div>
</div>
<div ng-repeat-end class="row-divider" ng-if="!(square.id % 3)"></div>
<div>
  <button class="btn btn-primary" click="newGame()">New game</button>
</div>