Использование ng-switch для заполнения таблицы

Question

Я использую Angular.js на переднем конце для заполнения таблицы. Я хочу использовать ng-switch для отображения только данных, которые имеют конкретные данные в одном столбце, например, только показывают данные «1-й недели» из списка расписания НФЛ, где один столбец данных - недели.

Так что прямо сейчас этот код ничего не показывает в таблице. Если кто-то может помочь объяснить это, мы будем очень благодарны. Может быть, я должен использовать ng-if? Может быть, мне нужно нажать кнопку, чтобы показать неделю 1, неделю 2 и т. Д. Какое лучшее решение для такого типа ситуации?

Вот контроллер ..

// ######################### 
// Predictions Controller 
// ######################### 
BLV_app.controller('PredictionsController', function($scope, PredictionsFactory, $routeParams) { 
    PredictionsFactory.getPredictions(function(data) { 
     $scope.predictions = data; 
    }); 
}); 

Вот завод ..

// --------------------------- 
// Prediction Factory 
// --------------------------- 
BLV_app.factory('PredictionsFactory', function($http) { 
    var factory = {}; 
    var predictions = []; 
    factory.getPredictions = function(callback) { 
    $http.get('/predictions').success(function(output) { 
     predictions = output; 
     console.log("prediction factory", predictions); 
     callback(output); 
     }); 
    }; 
    return factory; 
}); 

Вот HTML ..

 <table class="table-striped" id="table-style"> 
      <thead id="table-header"> 
       <tr> 
        <th class="text-center">HomeTeam</th> 
        <th class="text-center">AwayTeam</th> 
        <th class="text-center">Prediction</th> 
        <th class="text-center">Result</th> 
       </tr> 
      </thead> 
      <tbody ng-repeat="predict in predictions" > 
       <div ng-model="predict.Week"></div> 
       <tr ng-switch="predict.Week"> 
        <div ng-switch-when="1"> 
        <td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.HomeTeam }}</td> 
        <td ng-if="$even">{{ predict.HomeTeam }}</td> 
        <td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.AwayTeam }}</td> 
        <td ng-if="$even">{{ predict.AwayTeam }}</td> 
        <td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.Prediction }}</td> 
        <td ng-if="$even">{{ predict.Prediction }}</td> 
        <td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.Result }}</td> 
        <td ng-if="$even">{{ predict.Result }}</td> 
        </div> 
       </tr> 
      </tbody> 
     </table> 

Answer 1

Я считаю, что что-то не так с ng-repeat и ng-switch при связывании с такими элементами, как tbody и td. Замените их div и li заставляет его работать должным образом: JSFiddle.

<div ng-repeat="predict in predictions"> 
    <div ng-model="predict.id"></div> 
    <div ng-switch="predict.id"> 
    <div ng-switch-when="1"> 
     <li ng-if="$odd" style="background-color:#f1f1f1">{{ predict.name }}</li> 
    ...... 

Переход от <div ng-repeat="predict in predictions"> к <tbody ng-repeat="predict in predictions"> делает это не работает: JSFiddle.

В ng-repeat docs и ng-switch docs, он говорит:

Usage 
as attribute: 
<ANY 
    ng-repeat=""> 
... 
</ANY> 

Но очевидно, что они не могут быть использованы на ЛЮБЫЕ элементов.