Angular JS 中 ng-repeat 中的表单答案

【问题标题】：Forms inside ng-repeat in Angular JSAngular JS 中 ng-repeat 中的表单
【发布时间】：2015-05-05 14:12:03
【问题描述】：

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

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

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

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

【讨论】：