2 votes

AngularJS - pas de liaison bidirectionnelle pour les objets clé-valeur

Pour information, je ne connais rien à angularJS, j'ai travaillé avec knockoutJS auparavant et quand il s'agit d'angular, je ne fais que des suppositions.

J'ai un code comme celui-ci :

angular.module("umbraco").controller("recallCtrl",
function ($scope, $routeParams) {

    $scope.dcList = { 
        key: "value",
        abc: "aaaa",
        prop: "tadaa!"
    }
});

et le balisage comme suit :

    <div ng-controller="recallCtrl">
        <table class="table table-sm">
            <thead>
                <tr>
                    <td></td>
                    <th>Key</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tr ng-repeat="(key, value) in dcList">
                <td>

                </td>
                <td>
                    <input ng-model="key" />
                </td>
                <td>
                    <input ng-model="value"/>
                </td>
            </tr>

        </table>

        <pre>{{dcList | json}}</pre>
  </div>

Donc la sortie de dcList à la fin du html change ses valeurs lorsque je modifie les entrées correspondantes qui, comme je le suppose, sont liées à l'objet ?

Si je fais quelque chose de mal, veuillez me conseiller. Je veux créer un objet et être capable de modifier ses clés et ses valeurs.

3voto

Daniel Beck Points 3327

La raison pour laquelle votre code actuel ne fonctionne pas est que les variables "key" et "value" ont une portée au sein de l'objet de l'utilisateur. ng-repeat et ne se réfèrent plus directement à l'objet original.

Garder les "valeurs" attachées est facile, utilisez simplement dcList[key] au lieu de value . L'ajout de nouvelles clés demande un peu plus de travail ; ici, j'ai joint un fichier ng-blur à chaque champ "clé" qui initiera une nouvelle clé lorsque le champ s'estompera. ( ng-change créerait un nouveau champ à chaque frappe de touche, ce qui n'est pas ce que vous voulez). Notez que lorsque vous commencez à taper sur une nouvelle touche, sa valeur semble disparaître -- c'est parce que la fonction dcList[key] fait immédiatement référence au nouveau nom de clé. Bien entendu, cela serait quelque peu déroutant dans une interface utilisateur réelle ; vous voudriez probablement coder un comportement différent dans la fonction createNewKey (par exemple, en copiant l'ancienne valeur dans la nouvelle clé ou en supprimant la clé d'origine).

function recallCtrl($scope) {
    $scope.dcList = { 
        key: "value",
        abc: "aaaa",
        prop: "tadaa!"
    }

    $scope.createNewKey = function(k) {
      $scope.dcList[k]="";
    }

  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="recallCtrl">
    <table class="table table-sm">
        <thead>
            <tr>
                <th>Key</th>
                <th>Value</th>
            </tr>
        </thead>
        <tr ng-repeat="(key, value) in dcList">
            <td>
                <input ng-model="key" ng-blur="createNewKey(key)"/>
            </td>
            <td>
                <input ng-model="dcList[key]"/>
            </td>
        </tr>
    </table>

    <pre>{{dcList | json}}</pre>
  </div>

2voto

Sravan Points 13497

Veuillez tester ce code, changez la valeur correspondant à la clé,

    angular.module('app', [])
  .controller('Controller', function($scope) {

    $scope.dcList = { 
        key: "value",
        abc: "aaaa",
        prop: "tadaa!"
    }
  })

<!DOCTYPE html>
<html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

</head>

<body ng-app="app">
  <div ng-controller="Controller">
      <table class="table table-sm">
        <thead>
            <tr>
                <td></td>
                <th>Key</th>
                <th>Value</th>
            </tr>
        </thead>
        <tr ng-repeat="(key, value) in dcList">
            <td>

            </td>
            <td>
                <input ng-model="key" disabled/>
            </td>
            <td>
                <input ng-model="dcList[key]" />
            </td>
        </tr>

    </table>

    <pre>{{dcList | json}}</pre>
  </div>
</body>

</html>

Voici le plunker

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X