Question

我正在尝试使用ng-repeat迭代列表并使用ng-switch根据数据类型选择要显示的组件。问题是，在SoType和Dt4字段之后有空格。理想情况下，所有字段都应占用相等的空间，中间不应有任何空格。

HTML

  <div id="searchCriteria" class="col-xs-4"

                            ng-repeat="control in searchControls track by $index" ng-switch
                            on="control.elementType">

                            <label for="contain">{{control.name}} </label>

                                    <p ng-switch-when="calendar" class="input-group">
                                <input type="text" class="form-control "
                                    uib-datepicker-popup="{{format}}" ng-model="dt"
                                    is-open="values[$index]" datepicker-options="dateOptions"
                                    ng-required="true" close-text="Close"
                                    alt-input-formats="altInputFormats" /> 
                                    <span
                                    class="input-group-btn">
                                    <button type="button" class="btn btn-default"
                                        ng-click="calendarOpen($index)">
                                        <i class="glyphicon glyphicon-calendar"></i>
                                    </button>
                                </span>
                            </p>

                                    <p ng-switch-when="select">
                                <select class="form-control" ng-model="placement.selected"
                                    ng-options="o as o for o in control.options"></select>
                            </p>

                                        <p ng-switch-when="text">
                                <input name="ip_{{$index}}" class="form-control input-sm"
                                    ng-model="Fields[control.name]"  />
                            </p>

                        </div>

控制器

     $scope.searchControls.push({name: "Basic Product Type", elementType: "calendar",required: true});
         $scope.searchControls.push({name: "Plan Name", elementType: "text",options:['opt1','opt2','opt3']});
         $scope.searchControls.push({name: "Ben-setI", elementType: "calendar",required:true});
         $scope.searchControls.push({name: "State", elementType: "calendar",required:true});
         $scope.searchControls.push({name: "Dt1", elementType: "calendar"});
         $scope.searchControls.push({name: "SoType", elementType: "text",required: true});
         $scope.searchControls.push({name: "Dt2", elementType: "text",required: true});
         $scope.searchControls.push({name: "Dt3", elementType: "text",required: true});
         $scope.searchControls.push({name: "Plan Name", elementType: "calendar"});
         $scope.searchControls.push({name: "Dt4", elementType: "text",required:true});
         $scope.searchControls.push({name: "State of Issue", elementType: "select",required:true,options:['opt1','opt2','opt3']});

Answer 1

我认为您需要从此块中删除类input-sm

<p ng-switch-when="text">
      <input name="ip_{{$index}}" class="form-control input-sm" ng-model="Fields[control.name]"  />

在此示例中，一旦删除了类，它就会起作用 http://codepen.io/mkl/pen/ezvGGV

使用ng-repeat和ng-switch显示字段时对齐不正确

1 个答案: