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

【问题标题】：Potential AngularJS ng-repeat/ng-switch issue潜在的 AngularJS ng-repeat/ng-switch 问题
【发布时间】：2014-03-22 23:32:31
【问题描述】：

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

这可能是我使用 ng-switch 的方式，但您可以看到，如果您单击 0 或 1，它会更新数据（显示在网格顶部）和 DOM，但如果您更新 2，它会更新数据正确，但更新的是“12”而不是 2。模式越走越高。如果您的对象少于 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>

这里又是fiddle 链接。

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

谢谢。

【问题讨论】：

标签： angularjs ng-repeat ng-switch

【解决方案1】：

这就是我创建数据的方式。我需要用对象创建一个数组。这段代码似乎解决了这个问题。这是一个修改后的fiddle的链接

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

【讨论】：