Question

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

我有一个精简的侦探（没有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

一起显示多个可编辑元素并立即提交应该将它们包装成标签。该 form的name属性将在范围内创建变量（normal angular 行为）和editable-form属性将添加一些方法变量：

每个ng-form都需要tr属性，因为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-Xeditable加载页面，其中所有行都处于编辑模式

1 个答案: