Использование нг-повтора в табличном формате

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

Внутри чего-либо с помощью «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, для внутри нг-повтора

Вы ничего не можете получить доступ снаружи объекта data.main внутри DIV.

Если вам что-то требуется снаружи, подумайте еще раз. Вы действительно хотите, чтобы эти данные были напечатаны много раз?

Answer 2

Если вы хотите использовать «дорожку» с помощью индекса, напишите там: «track by $ index». удачи!

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>