Question

我有一个表单，它使用form-group css。我想添加一个ng-repeat，它有4列，并且有多行。目前的代码如下：

<body class="ng-cloak">
    <div ng-controller="testController" ng-init="init()">
        <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="" >
            <div class="container form-horizontal" ng-show="createMenu">
                <br />

              <div class="form-group">
                    <label for="firstName" class="col-sm-3 control-label">Name<em style="color:red">*</em></label>
                    <div class="col-sm-4">
                        <input type="text" maxlength="150" class="form-control" required="" ng-model="nName" id="nName" name="nName" />
                    </div>
                    <div class="col-sm-3">
                        <span class="error" ng-show="submitted == true && mainForm.nName.$error.required">Please enter Name.</span>
                    </div>                    
                </div>


// labels for ng-repeat data
  <div>
                    <div>
                        <label>
                            Language
                        </label>
                        <label>Title <em style="color:red">*</em></label>
                        <label>Description <em style="color:red">*</em></label>
                    </div>
                </div>

//ng-repeat section
 <div ng-repeat="Descriptions in seasonsWithDescription" >
                    <div>
                        <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
                    </div>
                    <div>
                        <input type="text" maxlength="150" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
                        <span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
                    </div>

                    <div>
                        <textarea maxlength="500" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
                        <span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
                    </div>

                    <div>
                        <a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || seasonsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
                        </a>
                    </div>
                    <br />
                </div>
</div>
              </form>
</div>
</body>

如何设置ng-repeat部分的css，以便顶部与ng-repeat对齐？我附上了一张我试图创作的图片。

Answer 1

您只需使用默认的Bootstrap类名即可完成该设置。不需要额外的CSS。您可以将HTML更改为：

<body class="ng-cloak">
    <div ng-controller="testController" ng-init="init()">
        <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
            <div class="container form-horizontal" ng-show="createMenu">
                <br />
                <div class="form-group">
                    <label for="firstName" class="col-sm-3 control-label">Name<em style="color:red">*</em></label>
                    <div class="col-sm-4">
                        <input type="text" maxlength="150" class="form-control" required="" ng-model="nName" id="nName" name="nName" />
                    </div>
                    <div class="col-sm-3">
                        <span class="error" ng-show="submitted == true && mainForm.nName.$error.required">Please enter Name.</span>
                    </div>
                </div>
                <!-- // labels for ng-repeat data -->
                <div class="row">
                    <label class="col-sm-3 text-center">Language</label>
                    <label class="col-sm-3 text-center">Title <em style="color:red">*</em></label>
                    <label class="col-sm-3 text-center">Description <em style="color:red">*</em></label>
                </div>
                <!-- //ng-repeat section -->
                <div class="row" ng-repeat="Descriptions in seasonsWithDescription">
                    <div class="col-sm-3 text-center">
                        <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
                    </div>
                    <div class="col-sm-3 text-center">
                        <input type="text" maxlength="150" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
                        <span style="color:red; display:block;" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
                    </div>
                    <div class="col-sm-3 text-center">
                        <textarea maxlength="500" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
                        <span style="color:red; display:block;" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
                    </div>
                    <div class="col-sm-3 text-center">
                        <a style="cursor:pointer">
                            <img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || seasonsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
                        </a>
                    </div>
                    <br />
                </div>
            </div>
        </form>
    </div>
</body>

我在这里所做的就是使用class="row"指定哪些元素应该是行，并使用class="col-sm-3"指定列中的哪些项。

这是一个小提琴：https://jsfiddle.net/m0nk3y/duqbptt4/

在form-group css中使用ng-repeat

1 个答案: