潜在的AngularJS ng-repeat/ng-switch问题

Question

我正在尝试使用AngularJS创建一个框的网格。我已经简化了我的方法，它很好地说明了这个问题。

这可能是我使用ng-switch的方式，但你可以看到，如果你点击0或1，它更新数据(显示在网格的顶部)和DOM，但如果你更新2，它更新数据正确，但"12"更新而不是2。你走得越高，这种模式就越持续。如果对象少于10个，那么所有对象都可以正常工作，但超过10个就会中断。

下面是HTML:

<div class="day" ng-controller="Controller" >
    {{hours}}
    <div ng-click="hourClick($index)" ng-repeat="hour in hours" ng-switch="$index % 4" class="quarter-hour">
        <div class="clock-back-1" ng-switch-when="0">{{$index}} - {{hour}}
        </div>
        <div class="clock-back-2" ng-switch-when="1">{{$index}} - {{hour}}
        </div>
        <div class="clock-back-3" ng-switch-when="2">{{$index}} - {{hour}}
        </div>
        <div class="clock-back-4" ng-switch-when="3">{{$index}} - {{hour}}
        </div>
    </div>
</div>
<script>
  function Controller($scope){
     $scope.hours = {};
    for (var i=0;i<20;i++){
        $scope.hours[i] = 0;
    }
    $scope.hourClick = function(index){
        $scope.hours[index] = 1;
    }
  }
</script>

这是小提琴的链接。

潜在的问题可能是:
我格式化数据的方式
我使用ng-switch的方式
？????

谢谢。

Answer 1

这是我创建数据的方式。我需要用object创建一个数组。这段代码似乎解决了这个问题。这是一个链接到修改后的小提琴

<div class="day" ng-controller="Controller" >
    {{hours}}
    <div ng-click="hourClick($index)" ng-repeat="hour in hours" ng-switch="$index % 4" class="quarter-hour">
        <div class="clock-back-1" ng-switch-when="0">{{$index}} - {{hour.id}}
        </div>
        <div class="clock-back-2" ng-switch-when="1">{{$index}} - {{hour.id}}
        </div>
        <div class="clock-back-3" ng-switch-when="2">{{$index}} - {{hour.id}}
        </div>
        <div class="clock-back-4" ng-switch-when="3">{{$index}} - {{hour.id}}
        </div>
    </div>
</div>
<script>
  function Controller($scope){
     $scope.hours = [];
    for (var i=0;i<20;i++){
        $scope.hours[i] = {"id":0};
    }
    $scope.hourClick = function(index){
        $scope.hours[index].id = 1;
    }
  }
</script>