[英]Using ng-repeat in table format
我在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
,但是我不知道我在哪里錯。
如果要對索引使用“ track by”,則應在此處編寫:“ track by $ index”。 祝好運!
在任何帶有“ ng-repeat”的東西中,您必須通過在ng-repeat中指定的內容來引用所有內容。
例如,說您在控制器“數據”中有一個數組“主”。
您在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>
你會得到你想要的。
原因是您將數據指定為ng-repeat內部所有內容的源。
theData等同於data.main,用於ng-repeat內部
您不能在div內訪問對象data.main外的任何內容。
如果您從外面需要任何東西,請再考慮一下。 您是否真的想多次打印該數據?
這對你有用嗎?
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.