javascript - AngularJS ng-repeat 不重复，没有控制台错误

Question

我正在使用 AngularJS 和 Angular Material 开始一个简单的井字棋游戏。作为其中的一部分，我尝试使用 ng-repeat 重复一组 md-buttons ，但重复不起作用。它看起来应该对我有用，并且看起来很像我见过的其他解决方案，所以可能有一些简单的东西我错过了，但我无法弄清楚。有什么建议吗？

这是我的 HTML:

  <div ng-app="ticTacToe">

  <h1>Tic Tac Toe</h1>

  <div ng-controller="TicTacToeCtrl">
    <div layout="row">
      <md-button ng-repeat="cell in vm.board[0]">{{cell.value}}</md-button>
    </div>

    <div layout="row">
      <md-button ng-repeat="cell in vm.board[1]">{{cell.value}}</md-button>
    </div>

    <div layout="row">
      <md-button ng-repeat="cell in vm.board[2]">{{cell.value}}</md-button>
    </div>
  </div>
</div>

还有我的 JavaScript:

(function() {
  'use strict';
  angular.module('ticTacToe', ['ngMaterial'])
  .controller('TicTacToeCtrl', function($mdDialog) {
      var vm = this;
      vm.board = [
        [{id: 1, value: ''}, {id: 2, value: ''}, {id: 3, value: ''}],
        [{id: 4, value: ''}, {id: 5, value: ''}, {id: 6, value: ''}],
        [{id: 7, value: ''}, {id: 8, value: ''}, {id: 9, value: ''}]
      ];
      vm.symbol = '';
      vm.victoryConditions = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [1, 4, 7],
        [2, 5, 8],
        [3, 6, 9],
        [1, 5, 9],
        [3, 5, 7]
      ];

      var init = function() {
        var popup = $mdDialog
          .confirm()
          .title("Tic Tac Toe")
          .textContent("Pick a side.")
          .ok("O")
          .cancel("X");
        $mdDialog.show(popup).then(
          function() {
            vm.symbol = "O";
          },
          function() {
            vm.symbol = "X";
          }
        );
      };
      init();
    });
})();

Answer 1

问题是您没有将 Controller 定义为。更改此:

<div ng-controller="TicTacToeCtrl as vm">