我有一个使用 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 对齐？我附上了我正在尝试创建的图像。
最佳答案
您可以仅使用默认的 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"指定哪些元素应该在列中。
这是一个 fiddle :https://jsfiddle.net/m0nk3y/duqbptt4/
关于css - 在表单组 css 中使用 ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41762620/