Angular-所有行都处于编辑模式的可编辑加载页面

Question

我是第一次尝试 angular-xeditable 并设法使一切正常，除了在编辑模式下页面加载所有 table 行和 我需要默认行为。（加载后单击 3 个取消按钮显示我要创建的内容）。

我有一个精简的 plunker（没有 CRUD 方法），它显示了我的意思...... plunker

我也使用 $scope 创建了相同的内容，但我不想使用 $scope ... plunker with $scope

这是我的观点：

<body ng-controller="DistributorsController as dist">
    <fieldset>
      <legend>Distributors</legend>
      <table class="table table-striped table-bordered">
        <tbody>
          <tr>
            <th style="width:22%;">Name</th>
            <th style="width:15%;">Phone</th>
            <th style="width:12%;">Email</th>
            <th style="width:6%;">&nbsp;</th>
          </tr>
          <tr ng-repeat="dis in dist.distributors" ng-dblclick="rowform.$show()">
            <td>
              <span editable-text="dis.name" e-name="name" e-form="rowform" e-style="width:100%;">
                  {{ dis.name || '--' }}
                </span>
            </td>
            <td>
              <span editable-text="dis.phone" e-name="phone" e-form="rowform" e-style="width:100%;">
                  {{ dis.phone|phone }}
                </span>
            </td>
            <td>
              <span editable-text="dis.email" e-name="email" e-form="rowform" e-style="width:100%;">
                  {{ dis.email || '--' }}
                </span>
            </td>
            <td style="white-space: nowrap">
              <!-- form -->
              <form editable-form="" name="rowform" onbeforesave="dist.saveRecord($data, dis.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == distributor">
                <button type="submit" ng-disabled="rowform.$waiting">
                  <span class="glyphicon glyphicon-ok-sign" style="color:#006837;"></span>
                </button>
                <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()">
                  <span class="glyphicon glyphicon-remove-sign" style="color: #990000;"></span>
                </button>
              </form>
              <div class="buttons" ng-show="!rowform.$visible">
                <span class="glyphicon glyphicon-trash" style="color: #990000;" ng-click="dist.removeRecord($index, dis.id)"></span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <p>
        <a ng-click="dist.insertRecord()" class="btn btn-xs btn-default">
          <span class="glyphicon glyphicon-plus-sign" style="color:#006837;"></span>


 Add New</a>
      </p>
    </fieldset>
  </body>

和我的控制器

(function(){
  'use strict';
  angular
    .module('app')
    .controller('DistributorsController', DistributorsController);

    DistributorsController.$inject = ['$filter'];

    /* @ngInject */
    function DistributorsController($filter) {
      /* jshint validthis: true */
      var vm = this;

      vm.distributors = [
        {id: 1, name: "Jonah's Whale", phone: '3185551212', email: 'jwhale@distributors.org'},
        {id: 2, name: "Paul's Thorn", phone: '5015551212', email: 'pthorne@distributors.org'},
        {id: 3, name: "Lot's Wife", phone: '5045551212', email: 'lwife@distributors.org'}
      ];

    }
})();

Answer 1

Doc Says

To show several editable elements together and submit at once you should wrap them into tag. The name attribute of form will create variable in scope (normal angular behavior) and editable-form attribute will add a few methods to that variable:

每个 tr 都需要 ng-form 属性，因为 table 标签

不支持其他元素

标记

<tbody>
    <tr ng-form editable-form name="editableForm" 
        ng-repeat="dis in dist.distributors" ng-dblclick="rowform.$show()">
           ...................    
           ..editable input elements here..
           ...................
    </tr>
</tbody>

Wokring Plunkr

Angular-所有行都处于编辑模式的可编辑加载页面

Angular-Xeditable loading page with all rows in Edit Mode

angularjs

x-editable