如何在Angular中动态添加引导模型中的字段

Question

我是webDevelopment 。 现在，这里有一个按钮列表，但是每次单击按钮的data-target都是相同的模型。 所以，我的模型就像-

<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">&times;</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>

在这个按钮就像-

 <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>

每个Button都将打开相同的模型，但应与click值相对应。 例如，如果按钮像FullName一样，我应该能够添加两个Input框fistName and lastName 。 就像单击按钮一样，如何添加该按钮的相应字段。 谁能帮我这个 ？

Answer 1

我认为您可以使用ng-if

只需以模态形式创建所有字段，例如firstname lastname电子邮件密码，记住我

当您单击btn时，请设置一个类似于showFields的变量，例如：showFields ==“ login”或“” showFields ==“ register”

对于仅需要在注册页面上显示的字段，请使用ng-if ='showFields== "register"'

希望对你有帮助