angularjs - 使用 Angular data-ng-show 指令显示错误

Question

我使用 data-ng-show 指令显示错误。它运行良好。唯一的问题是该消息显示在下一行。要求是显示在同一行。

我编写的 HTML 代码如下:

<form name="newTopicForm" novalidate class="form-horizontal" data-ng-submit="save()">
    <fieldset>
        <div class="col-md-9">
            <label for="title" class="control-label">Title</label>
            <input name="title" type="text" class="form-control" data-ng-model="newTopic.title" required data-ng-minlength="5" />
            <span class="error" data-ng-show="newTopicForm.title.$error.required">*</span>
            <span class="error" data-ng-show="newTopicForm.title.$error.minlength"> Minimum 5 Characters</span>
        </div>
</fieldset>
</form>

我正在使用这样的布局页面(_Layout.cshtml):

<div class="main">
        <div class="container">
            <div class="row">
                @RenderBody()
            </div>
        </div>
    </div>

请让我知道我缺少什么，谢谢。

Answer 1

根据您的代码表明，您还在使用 Twitter BootStrap。在 twitter bootstrap 'form-control' 类中，元素占据列的 100% 宽度。要使其位于同一行，您应该创建单独的列，如下所示 -

<form name="newTopicForm" novalidate class="form-horizontal" data-ng-submit="save()">
    <fieldset>
        <div class="col-md-6">
            <label for="title" class="control-label">Title</label>
            <input name="title" type="text" class="form-control" data-ng-model="newTopic.title" required data-ng-minlength="5" />            
        </div>
        <div class="col-md-3">
              <span class="error" data-ng-show="newTopicForm.title.$error.required">*</span>
            <span class="error" data-ng-show="newTopicForm.title.$error.minlength"> Minimum 5 Characters</span>
        </div>
</fieldset>
</form>