使用 ng-switch 填充表格答案

【问题标题】：Using ng-switch to populate a table使用 ng-switch 填充表格
【发布时间】：2015-11-05 19:43:31
【问题描述】：

我在前端使用 Angular.js 来填充表格。我想使用 ng-switch 仅显示在一列中具有特定数据的数据，例如仅显示来自 NFL 时间表列表的“第 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>

【问题讨论】：

PredictionsFactory.getPredictions的定义是什么？
嗨@webDeveloper 101，你能提供jsfiddle链接，这样很容易解决你的问题
如果我取出所有 ng-switch 语句和额外的 div，它会在表格上显示每周的所有数据。

标签： javascript angularjs dynamic html-table

【解决方案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>

但显然它们不能用于 ANY 元素。

【讨论】：