2017-09-11 66 views
0

我有一个form一些input字段和一些select字段,象下面这样:角 - 隐藏/显示部分复位形式数据

<div class="form-row "> 
<div on-click="datiReferentiBancaClicked = !datiReferentiBancaClicked"></div> 
<div class="form-row" *ngIf="!datiReferentiBancaClicked"> 
<label>Nome</label> 
<input type="text" id="refbnkNome" [ngModel]="richiesta.refbnkNome" formControlName="refbnkNome" placeholder="Nome"> 
</div> 
</div> 

所以第div切换的第二个。问题是,当我隐藏第二个div,并且我在这些字段中有一些数据时,此数据将重置为div隐藏。为什么发生这种情况?我必须设置一些物业吗?谢谢。

+0

你能提供更多的代码吗?所以我可以很容易地理解你的问题 – parthi

+1

使用(点击)而不是ng-click! – Vega

回答

0

使用ngHide代替ngIf。它只会折叠元素并使其不可见,而ngIf则会从DOM完全渲染元素。

+0

就是这样。 [hidden] =“datiRichiestaClicked”就像一个魅力。 – esseara

+0

我之前正在重新思考这个问题,这很有道理。因为[hidden]只是隐藏元素,而* ngIf指令添加/删除DOM中的元素,当然,我正在丢失我的数据。 – esseara

+0

ngHide适用于angularJS而非角度 –

0

你可以使用[ngStyle] = “myFunction的” 隐藏你的DIV,而不是* ngIf在组件

然后:

myFunction() { 
    if (!datiReferentiBancaClicked) 
    return {'visibility':'visible'} 
    else 
    return {'visibility':'hidden'} 
} 

绑定到[隐藏]属性

<div [hidden]="datiReferentiBancaClicked"></div> 

* ngIf从DOM中删除元素,其中visibility:hidden做n OT。

1
<div class="form-row"> 
<div ng-click="datiReferentiBancaClicked = !datiReferentiBancaClicked">Toggle</div> 
<div class="form-row" ng-show="!datiReferentiBancaClicked"> 
<label>Nome</label> 
<input type="text" id="refbnkNome" ng-model="richiesta.refbnkNome" placeholder="Nome"> 
</div> 
<div class="form-row" ng-hide="datiReferentiBancaClicked"> 
// if datiReferentiBancaClicked is true!. This div will be active! 
</div> 
</div> 
// This code is example for toggle 
+0

如果可能,您应该提供解释和答案。 – Mark