【发布时间】：2015-07-27 17:23:24
【问题描述】：
我第一次尝试 angular-xeditable 并设法让一切正常工作，除了页面在编辑模式下加载所有表格行并且 我需要默认行为。 （加载后单击 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%;"> </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'}
];
}
})();
【问题讨论】：
-
@isherwood，我能问一下你为什么编辑我的问题的标题吗？在我看来，具体（即角度可编辑）会有所帮助，因为不熟悉该技术的人甚至不必阅读该问题。放心，我不难过；只是好奇。
-
如果合适，请在您的问题标题中使用标签。不要简单地随机附加或预先添加它们。如果我误解了你的标题，我深表歉意。许多人只是在他们的前面写上门框。更多：meta.stackexchange.com/questions/19190/…
-
明白了。因为这个问题是 angular-xeditable 独有的，所以我觉得它在标题中是合适的。感谢您的建议。
标签： angularjs x-editable