如何在AngularJS智能表格中编辑内容

Question

我对Java Script还比较新，如果这看起来很基础，请谅解。

如何在Angularjs的Smart-Table中编辑行表？似乎没有新的Smart-Table教程。我想创建一个简单的表单让用户输入一个特定地点的营业时间。

我已经创建了可以添加和删除表中行的按钮，但是当我使用contenteditable="true"时，在更新对象时没有任何更改被保存。我知道contenteditable是独立于smart-table的特定HTML5参数，但我不明白如何更新数据或如何检索更新后的数据。

数据通过mean.js路由从angularjs控制器中检索。

<div class="controls">
    <table st-table="place.openHours" class="table table-striped">
        <thead>
        <tr>
            <th>Day</th>
            <th>Opening Time</th>
            <th>Closing Time</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in place.openHours" contenteditable="true" >
            <td>{{row.day}}</td>
            <td>{{row.open}}</td>
            <td>{{row.close}}</td>
            <button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
                <i class="glyphicon glyphicon-remove-circle">
                </i>
            </button>
        </tr>
        </tbody>
    </table>

    <button type="button" ng-click="addOpenHour(row)" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> Add new Row
    </button>
</div>

在 JavaScript 中：

    $scope.removeOpenHour = function removeOpenHour(row) {
        var index = $scope.place.openHours.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }

    $scope.addOpenHour = function addOpenHour() {
        $scope.place.openHours.push(
        {
            day: 'Monday',
            open: 540,
            close: 1080
        });
    };

- user2557625

---

我认为你需要更多的工作来在Angular中使用contenteditable。它直接改变了DOM，因此您需要捕获这些更改，以便Angular能够意识到它们。 https://github.com/akatov/angular-contenteditable/blob/master/angular-contenteditable.js - elpddev

Answer 1

谢谢，我查看了一下，并使用了这里的代码http://jsfiddle.net/bonamico/cAHz7/，并将其与我的代码合并。

HTML文件：

<tr ng-repeat="row in place.openHours">
   <td><div contentEditable="true" ng-model="row.day">{{row.day}}</div></td>
   <td><div contentEditable="true" ng-model="row.open">{{row.open}}</div></td>
   <td><div contentEditable="true" ng-model="row.close">{{row.close}}</div></td>
   <td>
   <button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
      <i class="glyphicon glyphicon-remove-circle">
      </i>
   </button>
</td>

JS 文件：

myApp.directive('contenteditable', function() {
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
        // view -> model
        elm.bind('blur', function() {
            scope.$apply(function() {
                ctrl.$setViewValue(elm.html());
            });
        });

        // model -> view
        ctrl.render = function(value) {
            elm.html(value);
        };

        elm.bind('keydown', function(event) {
            console.log("keydown " + event.which);
            var esc = event.which == 27,
                el = event.target;

            if (esc) {
                console.log("esc");
                ctrl.$setViewValue(elm.html());
                el.blur();
                event.preventDefault();
            }

        });

    }
};
});

- user2557625

---

Contenteditable在任何版本的IE上都不受支持。所以毫无用处。 - DotNetGeek

@DotNetGeek：不确定这怎么会使它无用。也许IE不应该落后这么多。 - PritishC

Answer 2

我的解决方案是这样的：

Angular 指令：

app.directive("markdown", function() {

  return {
    restrict: 'EA',
    scope: {

        value: '='},
    template: '<span ng-click="edit()" ng-bind="value"></span><input ng-blur="blur()" ng-model="value"></input>',
    link: function($scope, element, attrs) {
        // Let's get a reference to the input element, as we'll want to reference it.
        var inputElement = angular.element(element.children()[1]);

        // This directive should have a set class so we can style it.
        element.addClass('edit-in-place');

        // Initially, we're not editing.
        $scope.editing = false;

        // ng-click handler to activate edit-in-place
        $scope.edit = function() {
            $scope.editing = true;

            // We control display through a class on the directive itself. See the CSS.
            element.addClass('active');

            // And we must focus the element. 
            // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
            // we have to reference the first element in the array.
            inputElement[0].focus();
        };

        // When we leave the input, we're done editing.

        $scope.blur = function() {
            $scope.editing = false;
            element.removeClass('active');
        }
    }
  };

});

HTML:

 <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">

    <thead>
      <tr>
          <th st-sort="sku">SKU</th>
          <th st-sort="skuSupplier">SKU proveedor</th>
          <th st-sort="name">Descripción</th>
          <th st-sort="cantidad">Cantidad</th>
          <th st-sort="precio">Precio unitario</th>
          <th st-sort="total">Total</th>
      </tr>
      <tr>
          <th colspan="5"><input st-search="" class="form-control" placeholder="Buscar producto ..." type="text"/></th>
          </tr>
    </thead>
    <tbody>
       <tr ng-repeat="row in displayedCollection">
          <td><markdown value="row.sku"></markdown></td>
          <td><markdown value="row.skuSupplier"></markdown></td>
          <td><markdown value="row.name"></markdown></td>
          <td><markdown value="row.cantidad"></markdown></td>
          <td><markdown value="row.precio"></markdown></td>
          <td><markdown value="row.total"></markdown></td>
          <td>
              <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                 <i class="glyphicon glyphicon-remove-circle"></i>
              </button>
          </td>
      </tr>
    </tbody>
  </table>

- Mmeza-developer

---

每当我在文本框中输入内容时，它会显示两次，一次在文本框内部，另一次在文本框外部，请您看一下，谢谢。@user3809100 - Badhon Jain