Javascript 如何停止NG在角JS重复中的重复

我试图建立一个井字游戏，我有问题的造型。我有一个

ng repeat

用于所有9个方块，并且需要在每3个方块后添加一个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>

---

代码如下：

您需要从

ng repeat start开始

见普朗克

转动：

新游戏
Angularjs正是按照您编写的代码执行的

第一个循环使用square类创建9个div，然后第二个循环来创建分隔符

尝试只制作一个包含2个div的循环，一个用于正方形，另一个用于分隔符，使用
ng if=！（square.id%3）
我打开plunker，向我展示了预期的soduko型号。。有什么问题吗？我打开了一扇小窗户嗨，很高兴我能帮上忙。它之所以有效，是因为ng repeat end指令需要以
ng repeat start
开头。正常的
ng repeat
没有被实现为比它在自己的元素中看得更远。因此，
ng repeat end
元素不在
ng repeat
中，只向DOM添加一次
square.id%3=NaN
当在外部时重复
ng
和！NaN在
ng中为真，如果
，则显示一次。我明白了，在各自的DOM中看到了不同的地方，这就足够了。所以，如果你有ng重复开始，你也必须有ng重复结束。反之亦然？
.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;
  }
};

})

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