AngularJS 似乎在工作，但 ng-repeat 不是答案

【问题标题】：AngularJS seems to be working but ng-repeat is notAngularJS 似乎在工作，但 ng-repeat 不是
【发布时间】：2017-06-20 22:59:24
【问题描述】：

我很困惑，找不到错误。

Angular 正在工作，因为它正在读取我的 {{expressions}}，但是，它并没有用我期望的内容替换它们。它只是将它们移除，空白就在它们的位置。我确信这个问题也与我的 ng-repeat 指令不工作有关，出于某种原因。（不再重复。）

有人可以帮帮我吗？我正在尝试画一张桌子。在此示例中，完成后，应在同一行中多次发布相应的“想法”，并且每行应有不同的“想法”，如 $scope 中所列。

它正在创建一个填充空白的单行（而不是 {{idea}} ）。

index.html

<!doctype html>
<html ng-app="AppName">
<head>
    <link rel="stylesheet" type="text/css" href="styles/table.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body>
<div ng-controller="TableController">
    <table>
        <tr>
            <td>
                <table cellspacing="0">
                    <tr class="title_bar">
                        <td>Title</td>
                        <td>Rating</td>
                        <td>Votes</td>
                        <td>Comments</td>
                        <td>Post Date</td>
                        <td>Status</td>
                    </tr>
                </table>
            </td>
        </tr>
    <div ng-repeat="idea in ideas">
        <tr style="color: white">
            <td>{{idea}}</td>
            <td>{{idea}}%</td>
            <td>{{idea}}</td>
            <td>{{idea}}</td>
            <td>{{idea}}</td>
            <td>{{idea}}</td>
        </tr>
    </div>
    </table>
</div>

<script src="scripts/controllers/TableController.js"></script>
</body>

</html>

TableController.js

var app = angular.module('AppName', []); 

app.controller('TableController', ['$scope',function($scope){
    $scope.ideas = [
        'wow',
        'cool',
        'so nice',
        'amazing',
        'please work'
    ];
}]);

我可能遗漏了一些明显的东西，但我很感激你能给我的任何帮助。

编辑： 哎呀，我想我需要复习一下我的 HTML 基础知识。

【问题讨论】：

表格内的 div ?

标签： html angularjs html-table angularjs-ng-repeat

【解决方案1】：

嗯，你的 HTML 布局看起来很奇怪。你不应该把<div>放在<tr>之间

试试这样的：

<table>
    <tr class="title_bar">
        <td>Title</td>
        <td>Rating</td>
        <td>Votes</td>
        <td>Comments</td>
        <td>Post Date</td>
        <td>Status</td>
    </tr>
    <tr ng-repeat="idea in ideas">
        <td>{{idea}}</td>
        <td>{{idea}}%</td>
        <td>{{idea}}</td>
        <td>{{idea}}</td>
        <td>{{idea}}</td>
        <td>{{idea}}</td>
    </tr>
</table>

Fiddle demo

【讨论】：

【解决方案2】：

您拥有的是无效的 HTML，因此它不会按照您的预期呈现。您不能将<div> 放在<table> 中并让它包含元素；您可以在 <td> 元素中包含 <div> ，但这并不能真正帮助您。

如果您想在表中使用 ng-repeat，请在 <tr> 或 <tbody> 中使用它

        <tr ng-repeat="idea in ideas">
            <td>{{idea}}</td>
            ........
        </tr>

【讨论】：

【解决方案3】：

尝试将ng-repeat 指令添加到td 本身。

<tr>
  <td ng-repeat="idea in ideas">{{idea}}</td>
</tr>

这应该遍历您的 $scope.ideas 数组。

【讨论】：