可编辑文本在 Angular js 中不起作用答案

【问题标题】：Editable text not working in Angular js可编辑文本在 Angular js 中不起作用
【发布时间】：2017-12-04 08:36:34
【问题描述】：

在点击文本时使用 Angular js，文本应该是可编辑的。目前不工作。 Used this library。以下代码在视图页面中。

JS：

var app = angular.module('virVenturesAPP', ['angularUtils.directives.dirPagination','720kb.datepicker','xeditable']);//'720kb.datepicker'
var site_url = 'http://localhost/vv/';

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

HTML：

<table id="table_id" class="table table-striped table-hover table-bordered" ng-show="numberLoad">
    <thead>
        <tr>
            <th>#</th>
            <th>RRD Track No</th>
            <th>Order Primary Key</th>
            <th>Order Id</th>
            <th>Mapped Date</th>
            </tr>
    </thead>
    <tbody>
        <tr dir-paginate="rrd in getRrdList |  itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
            <td>{{rrd.id}}</td>
            <td>{{rrd.rrd_track_no}}</td>
            <td >{{rrd.ord_primary_key}}</td>
            <!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
            <td ng-if="rrd.order_id==='' ">  <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
            <td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
            <td>{{rrd.mapped_date}}</td>
        </tr>
    </tbody>
</table>

【问题讨论】：

您在控制台中遇到任何错误？
anguler.min.js 第 65 行错误
你能粘贴完整的错误吗？

标签： angularjs x-editable

【解决方案1】：

我删除了以下代码：

ng-show="numberLoad" 第 2 行
ng-if="rrd.order_id==='' " 第 18 行
['angularUtils.directives.dirPagination','720kb.datepicker'] 我觉得这行代码才是真正的问题

它的工作原理：

jsfiddle

尝试更好地调查

   <div ng-app="virVenturesAPP" ng-controller="Ctrl">
      <table id="table_id" class="table table-striped table-hover table-bordered" >
                <thead>
                    <tr>
                        <th>#</th>
                        <th>RRD Track No</th>
                        <th>Order Primary Key</th>
                        <th>Order Id</th>
                        <th>Mapped Date</th>
                        </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="rrd in getRrdList |  itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
                        <td>{{rrd.id}}</td>
                        <td>{{rrd.rrd_track_no}}</td>
                        <td >{{rrd.ord_primary_key}}</td>
                        <!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
                        <td >  <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
                        <td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
                        <td>{{rrd.mapped_date}}</td>
                    </tr>
                </tbody>
            </table>
 </div>

//脚本

var app = angular.module('virVenturesAPP', ['xeditable']);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';

});

app.controller('Ctrl', function($scope) {
  $scope.rrd = {
    order_id: 'awesome user'
  };
});

【讨论】：