Angular JS中ng-repeat内的表单

I am new to angular JS and started working on it just last week. I am using Angular-UI Bootstrap Tabs directive. On load the application shows a grid with list of records in a tab(static tab). When user picks a record from the grid inside static tab, I will show its details in a tab which is dynamically added to the DOM. I am yet to write that code but before that I am facing one issue, during load the input controls inside the form are visible till the time angularJs compiles the app. Is there a way to avoid it from happening, am I missing something here? If I am not very clear in my explanation (english is a second language) of the problem please feel free to ask

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

Below is the code I have written :

以下是我写的代码:

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 = [];
    });

1 个解决方案

#1

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

I am guessing this is what you are looking for. You could also bind your elements using ng-bind instead of {{}}. This prevents the {{}} on page load till angular complies the app.

我猜这就是你要找的东西。您还可以使用ng-bind而不是{{}}绑定元素。这可以防止页面加载{{}},直到角度符合应用程序。