Question

我有一个包含一些内容和一些按钮的表单。我想要做的是单击一个按钮，隐藏表单的原始内容并加载一些新内容。现在我使用ng-show完成了隐藏部分。但我坚持使用ng include加载新内容。我已经包含了我想在脚本标签内显示的内容，并尝试加载按钮点击。

这就是我所做的。

<!DOCTYPE html>
<html lang="en">
<div class="container">

    <form role="form" id="info_form" name="info_form" ng-controller="infoCtrl" ng-app="app"  novalidate>

        <section class="content-header">
            <h1>
                Fill your medical information
                <!--<small>Optional description</small>-->
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="box">

                <div class="box-body" ng-show="table_remove" >
                    <div>
                        <div class="col-lg-12">

                            <div style="margin-top: 15px;width: 100%;">
                                <!--first block-->
                                <div style="float: left;width: 33%;height: 100%">

                <div class="form-group">
                                        <label class="info_ques_text">Maximum Heart Rate</label>
                                        <div class="input-group">
                                            <input class='input' type="number" name="Heart" id="Heart" class="form-control"  ng-model="data.heart_rate" placeholder="Enter Value" required><br>
                                            <span class="error_msg" ng-show="submitted && info_form.Heart.$error.required">Value cannot be blank</span>
                                        </div>
                                    </div>
                                </div>


                                <!--third block-->

                <div class="form-group">
                                        <label class="info_ques_text">How Long Do You Work Per Day?</label>
                                        <div class="input-group">
                                            <select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
                                                <option value="" disabled selected>Select Your Option</option>
                                                <option value="0">4-5 Hours</option>
                                                <option value="1">5-6 Hours</option>
                                                <option value="2">6-7 Hours</option>
                                                <option value="3">More than 7 Hours</option>
                                            </select><br>
                                            <span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
                                        </div>
                                    </div> 
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="box-footer" ng-show="table_remove">
        <button href="" type="submit" ng-click="submitted = true; train(data);" class="btn btn-primary">Train data</button>
        <button href="" type="submit" ng-click="submitted = true; submit(data); template = 'predictview'" class="btn btn-primary">Submit</button>
                    <a type="button" class="btn btn-danger" href="{{url()}}/admin/organizations/view">Cancel</a>
                </div>

            </div>

<ng-include src="template"></ng-include>

            <script type="text/ng-template" id="predictview">

                        <div class="container" ng-controller="questionEditCtrl" >

                        <form class="form-horizontal" role="form" name='quizAdd' ng-submit="submit(data2)">

                         <a> New page </a>
                      </form>
                        </div>
            </script>

</section><!-- /.content -->
    </form>

</div>
</html>

AngularJS使用ng-include和templates加载新页面

0 个答案: