使用 table 格式的重复

Question

我在 Angular.js 的模块中有以下数组：

$scope.hsbody = []; //Data array
$scope.hsresult = []; //Data array
$scope.hsProcess = []; //Boolean array
$scope.hssuccess = []; //Boolean array
$scope.hsfailure = []; //Boolean array
$scope.hsExpand = []; //Boolean array
$scope.hsExpandUser = []; //Boolean array

我想在我的 Html 页面中显示数组项：

hsresult
hsbody
hsresult
hsbody
and so on..

所以我做了以下事情：

    <div>
        <pre>
            <table class="table table-condensed">
                  <tr ng-repeat="hs in hsbody track by $i" ng-show="hsProcess[i] && !hssuccess[i] && !hsfailure[i]" class="warning"><td><div class="glyphicon"></div>{{hsbody}}</td></tr>
                  <tr ng-show="hssuccess" ng-repeat="highstate in hsbody track by $i" class="success"><td><div class="glyphicon" ng-show="!hsExpand[i]"></div><div class="glyphicon" ng-show="hsExpand[i]"></div>{{ hsresult[i] }} </td></tr>
                  <tr ng-show="hsfailure" ng-repeat="hs in hsbody track by $i" class="danger"><td><div class="glyphicon" ng-show="!hsExpand"></div><div class="glyphicon" ng-show="hsExpand[i]"></div>{{ hsresult[i] }}</td></tr>
                  <tr ng-repeat="hs in hsbody track by $i" ng-show="(hsProcess[i] && hsExpand[i]) || (hsExpand[i] && hsfailure[i])" class="active"><td><pre>{{ hsbody[i] }}</pre></td></tr>
            </table>
        </pre>
    </div>

问题是我的 HTML 中没有显示任何内容。但是当我摆脱 ng-repeat 并使用 i=0 时，我可以看到这些值。

好像我没有正确使用ng-repeat，但我不知道我错在哪里。

Answer 1

如果你想使用带索引的"track by"，你应该在那里写："track by $index"。祝你好运！

Answer 2

在带有 'ng-repeat' 的任何内容中，您必须通过在 ng-repeat 中指定的任何内容来引用所有内容。

例如假设您在控制器 'data'.

中有一个数组 'main'

您在 data.main

中的对象中有用户名

$scope.main = [
    {username: 'jeff'},
    {username: 'brad'},
]

或

this.main = [
    {username: 'jeff'},
    {username: 'brad'},
]

如果你写了

<div ng-repeat="theData in data.main track by $i">
    {{ data.main.username }}
</div>

会出现错误，因为它未定义。

如果你写了

<div ng-repeat="theData in data.main track by $i">
    {{ theData.username }}
</div>

你会得到你想要的。

原因是您将 theData 指定为 ng-repeat 中所有内容的来源。

theData 等同于 data.main，因为在 ng-repeat

内部

您无法访问 div 内的对象 data.main 之外的任何内容。

如果你需要外面的东西，再想一想。您真的希望该数据打印多次吗？

Answer 3

这适合你吗？

    <div>
    <pre>
        <table class="table table-condensed">
            <tr ng-repeat="hs in hsbody track by $index" ng-show="hsProcess[$index] && !hssuccess[$index] && !hsfailure[$index]" class="warning">
                <td>
                    <div class="glyphicon"></div>{{hs}}
                </td>
            </tr>
            <tr ng-show="hssuccess" ng-repeat="highstate in hsbody track by $index" class="success">
                <td>
                    <div class="glyphicon" ng-show="!hsExpand[i]"></div>
                    <div class="glyphicon" ng-show="hsExpand[$index]"></div>{{ hsresult[$index] }} 
                </td>
            </tr>
            <tr ng-show="hsfailure" ng-repeat="hs in hsbody track by $index" class="danger">
                <td>
                    <div class="glyphicon" ng-show="!hsExpand"></div>    
                    <div class="glyphicon" ng-show="hsExpand[i]"></div>{{ hsresult[$index] }}
                </td>
            </tr>
            <tr ng-repeat="hs in hsbody track by $index" ng-show="(hsProcess[$index] && hsExpand[$index]) || (hsExpand[$index] && hsfailure[$index])" class="active">
                <td>
                    <pre>{{ hsbody[$index] }}</pre>
                </td>
            </tr>
        </table>
    </pre>
</div>

使用 table 格式的重复

Using ng-repeat in table format

javascript

angularjs

angularjs-ng-repeat