ng-if应该仅显示一个对象 [英] ng-if should show only one object

问题描述

您好，亲爱的Stackoverflow社区我遇到了问题.首先是我的代码:

Hi dear Stackoverflow Community i have a problem. First here is my Code:

html:

<md-card md-theme-watch flex="100" ng-repeat="offer in company.offers">

    <md-button class="md-fab md-mini md-primary md-fab-oi" aria-label="copy" ng-click="company.setEditVisibility()">

    <oi-offer-edit offer="offer" is-change="true" ng-if="company.isEditVisible">             
    </oi-offer-edit>
</md-card>

我的控制器:

function setEditVisibility(){
        vm.isEditVisible = !vm.isEditVisible;
    }

它工作得很好，问题在于它为每个重复的Object显示oi-offer-edit指令.如果您需要更多信息，请随时询问！

it work just fine the problem is that it shows oi-offer-edit directive for every repeated Object. If you need more info pls dont hesitate to ask!

推荐答案

如果您不想触摸标记并希望重复 oi-offer-edit 元素，则必须在 offer 对象本身上使用布尔属性:

If you don't want to touch your markup and want the oi-offer-edit element to be repeated, you have to use a boolean property on the offer object itself:

<md-card md-theme-watch flex="100" ng-repeat="offer in company.offers">
    <md-button class="..." ng-click="offer.formVisible = !offer.formVisible">

    <oi-offer-edit offer="offer" is-change="true" ng-if="offer.formVisible">             
    </oi-offer-edit>
</md-card>

---

在我意识到之前，您想在每个 md-card :

您可能希望将 oi-offer-edit 元素放置在 ng-repeat 容器之外，因为据我所见，您只需要一个带有所选 company.offers 的 offer -数据的

You might want to place your oi-offer-edit element outside your ng-repeat container, because as far as i see it in your snippet, you only need one with the offer-data of the selected company.offers.

因此，您可以将 offer 缓存在点击处理程序中，并使 oi-offer-edit 可见.像这样:

So you could just cache the offer on the click handler and make your oi-offer-edit visible. Something like this:

<md-card md-theme-watch flex="100" ng-repeat="offer in company.offers">
    <md-button class="..." ng-click="company.setEditVisibility(offer)">
</md-card>

<oi-offer-edit offer="currentSelectedOffer" is-change="true" ng-if="company.isEditVisible">             
</oi-offer-edit>

function setEditVisibility(selectedOffer){
     vm.currentSelectedOffer = selectedOffer;
     vm.isEditVisible = !vm.isEditVisible;
}

这篇关于ng-if应该仅显示一个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！