Угловой ng-повтор с ng-если не работает на теге tr - PullRequest
Новая
       44

Угловой ng-повтор с ng-если не работает на теге tr

0 голосов
/ 28 июня 2018

Ниже Div я использую ng-repeat для некоторых данных, чтобы заполнить список. при этом я не хотел бы создавать определенный тег TR, если он соответствует определенному требованию, используя директиву ng-if для x.Equipment_Cost_Child != 0 Однако, независимо от выражения, я не могу заставить ng-if работать должным образом ,

Как я могу заставить его показывать TR только если x.Equipment_Cost_Child > 0?

Я пытался "x.Equipment_Cost_Child > 0" Я также прикрепил ng-if непосредственно к тегу tr вместо тега div.

что вы думаете? 

<div  ng-repeat="x in reservationdata" ng-click="customerClickedEvent(x.ID)">
<table class="unit">
Item:{{$index + 1}}
<tr>
    <td style="font-weight:bold">Equipment Type: </td>
    <td style="font-weight:bold">{{x.EquipmentType}}</td>           
</tr>
<tr>    
    <td style="font-weight:bold" >Equipment Count:  </td>
    <td style="font-weight:bold">{{x.Equipment_Count}}</td>
</tr>
<tr>    
    <td>Adult Quantity:  </td>
    <td>{{x.Equipment_Count_Adult}} Cost @ ${{x.Duration_Cost_Adult}}</td>
</tr>
<div ng-if="x.Equipment_Cost_Child != 0">        //this line doesn't work
<tr>    
    <td>Child Quantity:  </td>
    <td>{{x.Equipment_Count_Child}} Cost @ ${{x.Duration_Cost_Child}}</td>
</tr>
</div>
<tr>
    <td>Sending Letters: </td>
    <td> {{x.Equipment_Form_Status}}</td>
</tr>
    <td> Total Cost For Item: </td>
    <td> ${{(x.Equipment_Count_Adult * x.Duration_Cost_Adult)+(x.Equipment_Count_Child * x.Duration_Cost_Child)}}

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Заменить: 

<div ng-if="x.Equipment_Cost_Child != 0">        //this line doesn't work
<tr>    
    <td>Child Quantity:  </td>
    <td>{{x.Equipment_Count_Child}} Cost @ ${{x.Duration_Cost_Child}}</td>
</tr>
</div>

Автор: 

<tr ng-show="x.Equipment_Cost_Child > 0">
    <td>Child Quantity:  </td>
    <td>{{x.Equipment_Count_Child}} Cost @ ${{x.Duration_Cost_Child}}</td>
</tr>
Тег

<div> нарушает ваш список <tr>. Вы можете использовать ng-if непосредственно на <tr>.

РЕДАКТИРОВАТЬ: используйте ng-show или ng-hide, чтобы показать / скрыть элементы. Это намного легче, потому что ng-if запускает перекомпиляцию DOM и генерирует новую область видимости.

0 голосов
/ 28 июня 2018

Используйте оба ng-if и ng-repeat в одном теге: 

<tr ng-repeat="feature in features"
    ng-if="feature.id === 1" >
</tr>

Или, если вы хотите условно отобразить некоторые шаблоны, вы можете использовать ng-switch, например: 

<tr
    ng-repeat="feature in features"
    ng-switch="feature.id" >
    <span ng-switch-when="1"></span>
    <span ng-switch-when="2"></span>
</tr>
...