Question

我很难过，找不到错误。

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基础知识。

Answer 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

Answer 2

你所拥有的是无效的HTML，因此它无法呈现你的预期。您无法在<div>内放置<table>并让其包含元素;您可以在<div>元素中加入<td>，但这对您没有任何帮助。

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

中使用它

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

Answer 3

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

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

那应该遍历你的$scope.ideas数组。

AngularJS似乎正在起作用，但ng-repeat却没有

3 个答案: