javascript - Angular JS 中 ng-repeat 中的表单

Question

我是 Angular JS 的新手，上周才开始研究它。我正在使用 Angular-UI Bootstrap Tabs 指令。加载时，应用程序会在选项卡(静态选项卡)中显示带有记录列表的网格。当用户从静态选项卡内的网格中选择一条记录时，我将在动态添加到 DOM 的选项卡中显示其详细信息。我尚未编写该代码，但在此之前我面临一个问题，在加载期间，表单内的输入控件在 angularJs 编译应用程序之前是可见的。有没有办法避免它发生，我在这里遗漏了什么吗？如果我对问题的解释(英语是第二语言)不是很清楚，请随时提问

下面是我写的代码:

HTML:

<div class="container-fluid" id="appContentId" ng-app="appContent" ng-controller="appContentController">
        <tabset>
            <tab heading="EventList">
                @*Code to show list*@
            </tab>
            <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                <form>
                    <div class="row">
                        <div class="col-lg-6">
                        </div>
                        <div class="col-lg-6" style="text-align:right;">
                            <button type="button" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" ng-model="tab.data.EventName" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>EventType</label>
                                <select ng-options="evt.Text for evt in tab.data.EventTypeList" ng-model="tab.data.EventType"></select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Description</label>
                                <input type="text" ng-model="tab.data.Description" class="form-control" />
                            </div>
                        </div>
                    </div>
                </form>
            </tab>
        </tabset>
    </div>

Javascript:

var appContentModule = angular.module("appContent", ['ui.bootstrap']);

 appContentModule.controller("appContentController", function ($scope, $http) {
        $scope.tabs = [];
    });

Answer 1

    <tab ng-cloak ng-repeat="tab in tabs" heading="{{tab.title}}" 
active="tab.active" disable="tab.disabled">

我猜 this是你要找的。 您还可以使用 ng-bind 而不是 {{}} 来绑定(bind)您的元素。这会阻止页面加载 {{}}，直到 Angular 符合应用程序。