时间戳

首页 > 解决方案 > 在弹出窗口中显示可编辑的可编辑表单

javascript - 在弹出窗口中显示可编辑的可编辑表单

问题描述

需要将可编辑表单包装在引导程序 uib-popover-template 中。

已经尝试过可编辑的 ui-bootstrap 弹出框方法，但它没有按预期工作。

Plunker 1 --> https://plnkr.co/edit/vXeVoFYVU2IU08CF angular-bootstrap 方法 - 无法显示/隐藏表单

Plunker 2 --> https://plnkr.co/edit/upUFeEeQbxs8VfF5?preview x-editable 方法 - 无法将其包装在弹出框内

<div class="ui-popover-wrapper">
  <a href="#" editable-text="user.name" 
    ng-click="editableForm.$show()">{{user.name || 'empty' }}</a>
</div>

   <form editable-form name="editableForm" onaftersave="saveUser()" ng-show="editableForm.$visible">
    <div>
      <span class="title">DDown1: </span>
      <span editable-select="user.status" e-name="status" e-ng-options="s.value as s.text for s in statuses">
        {{ (statuses | filter:{value: user.status})[0].text || 'Not set' }}
      </span>
    </div>  

    
    <div>
      <!-- editable username (text with validation) -->
      <span class="title">DropDown Date: </span>
      <span editable-date="user.date" onbeforesave="checkDate($data)"
      >{{ (user.date | date: "yyyy-MM-dd") || 'empty' }}</span>
    </div> 
    
    <div>
      <!-- buttons to submit / cancel form -->
      <span ng-show="editableForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
          Cancel
        </button>
      </span>
    </div>
  </form>

标签： javascriptangularjsangular-ui-bootstrapx-editableangular-xeditable

解决方案

我已经编辑了你的第一个 plunkr：https ://plnkr.co/edit/QNKoOd7rZzAiIRJf

您需要将模板的 id 作为字符串传递给 bootstrap popover 指令：

  uib-popover-template="'myPopoverTemplate.html'"

我还从您的代码中删除了这个：

ng-show="editableForm.$visible"

我假设您想在点击时显示弹出框。

推荐阅读