So Bearbeiten Sie den Inhalt in Angular js Smart Table

Ich bin ganz neu mit java Skript, also muss ich mich entschuldigen, wenn dies scheint basic.

Wie kann ich das Bearbeiten von Zeilen der Tabellen in der Smart-Tabelle mit Angularjs? Es scheint nicht zu sein ein tutorial mit den neuen Smart-Tabelle. Ich möchte erstellen Sie eine einfache form für die Nutzer, um die Stunden zu öffnen für einen bestimmten Ort.

Ich erstellt habe, Schaltflächen hinzufügen und entfernen von Zeilen für die Tabelle, aber wenn ich in contenteditable="true" keine der änderungen werden beibehalten, wenn ich das Objekt aktualisiert. Ich verstehe, dass das contenteditable ist eine bestimmte html5-Parameter unabhängig von der smart-Tabelle, aber ich verstehe nicht, wie ich sonst noch die Daten aktualisieren können oder wie konnte ich wieder die Daten aktualisiert werden.

Den Abruf von Daten aus dem angularjs-controller über die mean.js Routen.

<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>

Innerhalb der 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
        });
    };
InformationsquelleAutor user2557625 | 2015-02-11
  1. 12

    Dank hatte ich einen Blick um und verwendet den code von hier http://jsfiddle.net/bonamico/cAHz7/ und fusionierte es mit meinem code.

    HTML-Datei:

    <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-Datei:

    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();
            }

        });

    }
};
});
    • Contenteditable wird nicht unterstützt, auf jeder beliebigen version von IE. Also nutzlos.
    • Nicht sicher, wie Sie das macht es nutzlos. Vielleicht ist der IE soll nicht sein, die hinter so viel.
    InformationsquelleAutor user2557625
  2. 4

    Meine Lösung ist es:

    Winkel-Richtlinie :

    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>
    • Wann immer ich etwas in die textbox zeigt es zweimal, eine innerhalb der textBox & andere außerhalb des Textfelds, können Sie bitte schauen? @user3809100
    InformationsquelleAutor user3809100
Schreibe einen Kommentar