Ich bin ziemlich neu in Java Script, also muss ich mich entschuldigen, wenn dies grundlegend erscheint.

Wie kann ich Zeilentabellen in Smart-Table mit Angularjs bearbeiten? Es scheint kein Tutorial für den neuen Smart-Table zu geben. Ich möchte ein einfaches Formular erstellen, in dem Benutzer die Öffnungszeiten für einen bestimmten Ort eingeben können.

Ich habe Schaltflächen erstellt, mit denen Zeilen in der Tabelle hinzugefügt und entfernt werden können. Wenn ich jedoch contenteditable = "true" hinzufüge, werden keine Änderungen beibehalten, wenn ich das Objekt aktualisiere. Ich verstehe, dass contenteditable ein spezifischer HTML5-Parameter ist, der von smart-table unabhängig ist, aber ich verstehe nicht, wie ich die Daten sonst aktualisieren oder wie ich die aktualisierten Daten abrufen könnte.

Die Daten werden über die mean.js-Routen vom anglejs-Controller abgerufen.

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