Comment enregistrer des lignes d'une grille que j'ai fait un changement de

J'ai utilisé ng-ressource pour obtenir des données à partir de mon serveur, puis de placer les données dans une grille de table comme ceci:

<div ng-form name="grid">
      <button type="submit" data-ng-disabled="grid.$pristine">Save</button>
        <div class="no-margin">
            <table width="100%" cellspacing="0" class="form table">
                <thead class="table-header">
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                    </tr>
                </thead>
                <tbody class="grid">
                    <tr data-ng-repeat="row in grid.data">
                        <td>{{ row.contentId }}</td>
                        <td><input type="text" ng-model="row.title" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
</div>

Est-il une manière que je peux faire en sorte qu'en cliquant sur le bouton Soumettre vérifie à travers la grille pour les lignes qui ont changé et appelle ensuite une putEntity(row) fonction avec la ligne comme argument?

InformationsquelleAutor | 2013-07-15
  1. 12

    Vous pourriez faire un peu de moyens, et n'oubliez pas tous les NgModelController a un $drapeau sale qui peut l'utiliser pour vérifier si l'entrée a changé. Mais je dirais que le plus simple est juste pour ce faire:

    Modifier pour HTML:

    <input type="text" ng-model="row.title" ng-change="row.changed=true" />
<button ng-click="save()">Save</button>

    En JS:

    $scope.save = function () {
    //iterate through the collection and call putEntity for changed rows
    var data = $scope.grid.data;
    for (var i = 0, len = data.length; i < len; i++) {
        if (data[i].changed) {
            putEntity(data[i]);
        }
    }
}
    • Merci. Je vais examiner cette question et de le vérifier.
    • J'aime la simplicité de cette approche. N'oubliez cependant pas que vous auriez besoin d'un changement de l'événement sur toutes les propriétés modifiables de votre objet ne prend en compte que les modifications effectuées sur row.title.
    • Si vous avez un problème vous pouvez toujours attraper l'événement de modification d'un élément parent. jquery d'événement de changement de bulles de sorte que vous pouvez simplement créer une directive et l'attacher à la div parent qui ne: élément.on('change d'entrée', function (evt) { /*... */ });
    InformationsquelleAutor brentmckendrick
  2. 3

    Voici quelque chose qui pourrait fonctionner. Il est construit avec le JSFiddle de la première observation de base.

    Tout d'abord, j'ai changé le data-ng-disabled attribut changes.length <= 0 et a ajouté $scope.changes = [] pour le contrôleur.

    $scope.changes = [];

    Puis j'ai ajouté une montre sur $scope.data

    $scope.$watch('data', function(newVal, oldVal){
    for(var i = 0; i < oldVal.length; i++){
        if(!angular.equals(oldVal[i], newVal[i])){
            console.log('changed: ' + oldVal[i].name + ' to ' + newVal[i].name);

            var indexOfOld = $scope.indexOfExisting($scope.changes, 'contentId', newVal[i].contentId);

            if(indexOfOld >= 0){
                $scope.changes.splice(indexOfOld, 1);
            }

            $scope.changes.push(newVal[i]);
        }
    }
}, true); //true makes sure it's a deep watch on $scope.data

    En gros, cela fonctionne à travers le tableau et vérifie si quelque chose a changé à l'aide de angulaire.est égal à. Si un objet a changé, il est vérifié s'il existe dans $scope.changes déjà. Si elle le fait, elle est retirée. Après que newVal[i] est poussé à $scope.changes

    La $scope.indexOfExisting est pris de cette SORTE de question

    $scope.indexOfExisting = function (array, attr, value) {
    for(var i = 0; i < array.length; i += 1) {
        if(array[i][attr] === value) {
            return i;
        }
    }
};

    Enfin, j'ai fait le $scope.checkChange() ressemble

    $scope.checkChange = function(){
    for(var i = 0; i < $scope.changes.length; i++){
        console.log($scope.changes[i].name);
        //putEntity($scope.changes[i])
    }
    $scope.changes = [];
};

    Cela vous donnera alors la possibilité de présenter uniquement les lignes qui ont été modifiées.

    • Merci beaucoup Anders. Je vais vérifier cela et aussi juste attendre un peu de temps pour voir si quelqu'un d'autre a une autre solution avant de les marquer comme acceptée.
    • Pourquoi ne pas faire le sale vérifiant uniquement lorsque l'utilisateur clique sur soumettre? Par l'enregistrement d'un $scope.$regarder, et en utilisant l'égalité de vérification, vous pourriez potentiellement être d'engager une véritable performance et de coût, en fonction de la longueur de dollars de votre portée.objet de données et de la complexité des objets.
    • hgcrpd - je pense que vous avez raison ici. J'ai beaucoup de lignes de données et chaque ligne a un certain nombre d'informations. Regarder portée.les données ne semble pas être une très bonne solution car il y a beaucoup de choses à regarder. Tel qu'il est, je ne peux vraiment pas accepter cette solution 🙁
    • hgcrpd, je suis d'accord avec votre souci de la performance. Je pense que changer il devrait être assez simple si. Je vais mettre à jour la réponse, quand j'ai le temps plus tard aujourd'hui.
    • Anders - pensez-vous qu'il serait plus facile de revenir à la "data-ng-disabled="grid.$vierges">" Il semble très propre façon de vérifier si des changements ont été apportés. Je suis impatient de vérifier toutes les idées que vous avez.
    • Je suis d'accord qui semble plus propre. Si il est une élégante façon de modifier la valeur de $vierge après vous cliquez sur "enregistrer" qui serait préférable.

    InformationsquelleAutor AndersDaniel
  3. 2

    J'ai décidé de le faire comme suit:

    C'est là où je obtenir les données, puis de faire une copie de celui-ci:

    getContents: function ($scope, entityType, action, subjectId, contentTypeId, contentStatusId) {
    entityService.getContents(entityType, action, subjectId, contentTypeId, contentStatusId)
    .then(function (result) {
        $scope.grid.data = result;
        $scope.grid.backup = angular.copy(result);
        $scope.grid.newButtonEnabled = true;
    }, function (result) {
        alert("Error: No data returned");
        $scope.grid.newButtonEnabled = false;
    });
},

    Ensuite, quand il s'agit de sauver-je utiliser angulaire.est égal à comparer avec une sauvegarde:

    $scope.saveData = function () {
   var data = $scope.grid.data;
            for (var i = 0, len = $scope.grid.data.length; i < len; i++) {
                if (!angular.equals($scope.grid.data[i], $scope.grid.backup[i])) {
                    var rowData = $scope.grid.data[i]
                    var idColumn = $scope.entityType.toLowerCase() + 'Id';
                    var entityId = rowData[idColumn];
                    entityService.putEntity($scope.entityType, entityId, $scope.grid.data[i])
                        .then(function (result) {
                            angular.copy(result, $scope.grid.data[i]);
                            angular.copy(result, $scope.grid.backup[i]);
                        }, function (result) {
                            alert("Error: " + result);
                        })
                }
            }
            $scope.grid.newButtonEnabled = true;
            $scope.grid.saveButtonEnabled = false;
            $scope.$broadcast('tableDataSetPristine');
    }
    • hmm. pourquoi voudriez-vous le faire de cette façon et non pas à la ng-changer la façon qui est beaucoup plus efficace et nécessite moins de code?
    • Je suis d'accord que votre méthode est plus efficace et j'ai changé pour accepter votre réponse. Merci pour votre aide 🙂
    InformationsquelleAutor
  4. 2

    J'ai fait quelque chose de tout à fait semblable à moi, et j'ai utilisé d'une manière différente, j'ai décidé de lier directement tous les ng-modèles pour les données, permettez-moi de travailler avec l'index si j'ai besoin de vérifier à chaque ligne, mais je pourrais aussi décider d'envoyer l'ensemble des données au serveur

    Alors, je viens de regarder toutes les modifications apportées à chaque indice (même avec le big data, j'ai juste à ajouter/supprimer un entier) et les stocker dans un tableau

    Une fois terminé, je peux cliquer sur le bouton "soumettre", qui passe en boucle sur tous les index que j'ai touché, pour vérifier si le contenu est vraiment différent de celui d'origine, et puis je fais ce que je veux avec elle (comme l'appel d'une putEntity fonction, si j'en avais un)

    J'ai fait du violon en fonction de votre code html, il sera plus facile de jouer avec elle qu'avec un copier/coller du code ici : http://jsfiddle.net/DotDotDot/nNwqr/1/

    Le principal changement dans le code HTML de cette partie, la liaison du modèle aux données et en ajoutant un changement écouteur

    <td><input type="text" ng-model="data[$index].title" ng-change="notifyChange($index)"/></td>

    Je pense que la partie javascript est tout à fait compréhensible, je me connecte index pendant que les données sont modifiées, puis, plus tard, quand je clique sur le bouton submit, il peut appeler le droit de la fonction sur les lignes modifiées, selon le connecté index

    InformationsquelleAutor DotDotDot