Question

我试图在Angular-UI手风琴的标题中插入一个输入，但是当输入显示时，手风琴会混乱。我想这可能是因为我隐藏了实际的标题文字，所以标题的高度发生了变化，手风琴变得混乱。理想情况下，我希望保持高度动态（响应式视点），但固定高度也可以。

单击编辑按钮时，我想在标题中显示一个输入字段，以便用户可以更新文本（保存或绑定值不是一个问题..只是想正确显示输入字段）。

我使用表格演示了我想要的内容，我想将该功能复制到手风琴标题中。

<table class="table table-bordered table-striped table-hover">
    <thead>
      <tr id="th-row">
        <th>Name</th>
        <th class="col-xs-1">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <span ng-show="!edit" ng-model="personName">John Smith</span>

          <div ng-show="edit" class="col-xs-12">
            <input type="text" ng-model="personName" ng-required="true" value="" class="form-control" placeholder="Person Name">
          </div>
        </td>
        <td>
          <button ng-show="!edit" class="btn btn-xs btn-primary" ng-click="edit = true">
            <i class="glyphicon glyphicon-edit"></i>
          </button>
          <button ng-show="edit" class="btn btn-xs btn-danger" ng-click="edit = false">
            <i class="glyphicon glyphicon-remove"></i>
          </button>
        </td>
      </tr>
    </tbody>
</table>

现在我的手风琴代码：

<accordion-group>
    <accordion-heading>
      <span ng-show="!edit1" ng-model="headingName">Header with Button group</span>
      <div ng-show="edit1" class="col-xs-12">
        <input type="text" ng-model="headingName" ng-required="true" value="" class="form-control" placeholder="Heading Name">
      </div>

      <div class="pull-right">
        <button ng-show="!edit1" class="btn btn-info btn-xs" ng-click="edit1 = true; $event.stopPropagation();"><i class="glyphicon glyphicon-edit"></i></button>
        <button ng-show="edit1" class="btn btn-danger btn-xs" ng-click="edit1 = false; $event.stopPropagation();"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </accordion-heading>
    This is just some content to illustrate fancy headings.
</accordion-group>

这是Plunker Demo

<input /> Angular-UI手风琴标题引导内联编辑中的文本输入

0 个答案: