[英]How to add fields in bootstrap model dynamically in angular
I am new to webDevelopment
. 我是
webDevelopment
。 Now, Here I have a list of buttons , but the data-target
is a same model for every button click. 现在,这里有一个按钮列表,但是每次单击按钮的
data-target
都是相同的模型。 So, My model is like - 所以,我的模型就像-
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Missing {{suggestivalue}}
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
In this buttons are like - 在这个按钮就像-
<ul class="col-md-12 list-group suggestion">
<li class="list-group-item suggestion-list-group-item nopadding" ng-repeat="suggestion in suggestions | orderBy:'name'" tooltip-trigger
tooltip-placement="bottom" tooltip={{suggestion.name}} tooltip-popup-delay=200 tooltip-append-to-body="true">
<button ng-click="grabIndex(suggestion)" class="btn btn-default btn-block suggestion-button" role="button" data-toggle="modal"
data-target="#myModalHorizontal"><span class="suggestion-text">{{suggestion.name}}</span>
</button>
</li>
</ul>
Every Button is going to open a same model,But It should be respective to that of click value. 每个Button都将打开相同的模型,但应与click值相对应。 Eg If the button is like
FullName
, I should be able to add the two Input box fistName and lastName
. 例如,如果按钮像
FullName
一样,我应该能够添加两个Input框fistName and lastName
。 Its like on click of the Button, How can I add the fields respective of that button.? 就像单击按钮一样,如何添加该按钮的相应字段。 Can any one help me with this ?
谁能帮我这个 ?
I think you can use ng-if 我认为您可以使用ng-if
Just create all fields in modal Like firstname lastname email password remember me 只需以模态形式创建所有字段,例如firstname lastname电子邮件密码,记住我
When you click on btn , set a variable like showFields Eg: showFields== "login" or "" showFields== "register" 当您单击btn时,请设置一个类似于showFields的变量,例如:showFields ==“ login”或“” showFields ==“ register”
use ng-if ='showFields== "register"'
for fields that need to show only on register page 对于仅需要在注册页面上显示的字段,请使用
ng-if ='showFields== "register"'
Hope it will help 希望对你有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.