Comment modifier le contenu en Angular js Smart Table

Je suis tout à fait nouveau pour java script, donc je dois m'excuser si cela semble fondamentale.

Comment puis-je modifier les lignes des tables dans de Smart-Tableau avec Angularjs? Il ne semble pas être un tutoriel avec la nouvelle Smart Table. Je voudrais créer un formulaire simple pour les utilisateurs d'entrer les heures d'ouverture d'un lieu donné.

J'ai créé des boutons ajouter et supprimer des lignes sur la table, mais quand je l'ai ajouter dans contenteditable="true" aucune des modifications sont conservées lorsque je l'ai mise à jour de l'objet. Je comprends que le contenteditable est un html5 paramètres indépendants de la smart table, mais je ne comprends pas comment je peux mettre à jour les données ou comment je pourrais récupérer les données mises à jour.

Les données sont extraites de la angularjs contrôleur via l'mean.js les itinéraires.

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

À l'intérieur de l'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
        });
    };

Je pense que vous avez besoin de faire un peu plus de travail à utiliser contenteditable Angulaire. C'modifier le dom directement et vous avez besoin pour attraper ces changements, si Angulaire sera au courant d'entre eux. github.com/akatov/angular-contenteditable/blob/master/...

OriginalL'auteur user2557625 | 2015-02-11

Merci, j'ai eu un coup d'oeil autour et utilisé le code à partir d'ici http://jsfiddle.net/bonamico/cAHz7/ et l'a fusionné avec mon code.

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

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

        });

    }
};
});

Contenteditable n'est pas pris en charge sur n'importe quelle version de IE. Donc inutile.
Pas sûr de la façon qui le rend inutilisable. Peut-être que IE ne devrait pas être à l'origine de beaucoup de choses.

OriginalL'auteur user2557625

Ma solution est-elle:

Angulaire de la directive :

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>

Chaque fois que je tape quelque chose dans la zone de texte, il montre deux fois, l'une à l'intérieur de la zone de texte & d'autres à l'extérieur de la zone de texte, pouvez-vous s'il vous plaît avoir un coup d'oeil? @user3809100

OriginalL'auteur user3809100

Vous devez vous connecter pour publier un commentaire.