AngularJS: ng-repeat avec la valeur de la clé de mise à jour de l'objet

Je me suis rendu clé:valeur de l'objet de tableau avec ng-repeat comme ceci:

<div ng-controller="mainCtrl">    
  <div ng-repeat="record in records">
    <div ng-repeat="(key, value) in record">
        <input ng-model="key" />: <input ng-model="value" />
    </div>
  </div>
</div>

JS:

var mainCtrl = function($scope){
$scope.records = [
        {'key1':'val1'},
        {'key2':'val2'}
        ];
}

Problème, c'est que les clés et les valeurs ne peuvent pas être mis à jour via la saisie des tags. Pour une raison quelconque, il devient un moyen de liaison après la prise de ng-repeat parcourir (clé,valeur).

Violon: http://jsfiddle.net/BSbqU/1/

Comment puis-je faire une liaison bidirectionnelle? Ou devrais-je aborder ce problème d'une manière différente, puis imbriquée ng-repeat?

OriginalL'auteur Sergej Popov | 2013-05-11

  1. 6
    <div ng-controller="mainCtrl">    
<div ng-repeat="record in records">

        <input ng-model="record.name" />: <input ng-model="record.value" />
    </div>
</div>

    Et le JS:

    var myApp = angular.module('myApp', []);

var mainCtrl = function($scope){
$scope.records = [
{'name':'key1','value':'val1'},
{'name':'key2', 'value':'val2'}
        ];
}
    Cela rend les champs d'entrée modifiable, MAIS la variation de la valeur n'est pas mise à jour le modèle. De sorte que la liaison reste un moyen. Violon: jsfiddle.net/BSbqU/2
    Gotcha, quelque chose à faire avec l'aide de la touche ng-model, si j'étais capable de le faire fonctionner en attribuant le nom et la valeur et la suppression de l'intérieur de répéter, de se tenir , se jsfiddle de travail.
    Très intéressant de voir comment vous le faites sans intérieure répéter, mais le violon, vous avez donné n'est pas mis à jour..
    Mise à jour de réponse, jsfiddle n'est pas coopérant avec moi ce matin.
    Ok, cela implique un changement dans la structure du modèle . Qui je pourrais le faire mais pas tout à fait désireux de le faire. +1.

    OriginalL'auteur Jason

  2. 6

    Cette option fonctionne avec l'objet:

    <div ng-controller="mainCtrl">    
  <div ng-repeat="record in records">
    <div ng-repeat="(key, value) in record">
        <input ng-model="key" />: <input ng-model="record[key]" />
    </div>
  </div>
</div>

    Pas brillant, mais il fonctionne.

    son travail pour qu'une valeur, mais cette mise à jour de la clé?

    OriginalL'auteur vlad

  3. 0

    Après de me gratter la tête à l'os, j'ai trouver un moyen de mettre à jour l'objet des noms de clé.
    C'est un peu tordu mais ça marche pour moi.

    remplacer 

    <input ng-model="key" />

    avec 

    <input type="text" ng-model="key" ng-change="update_key(record,key,$index)" line-key/>

    vous aurez besoin de la "lineKey " directive juste pour garder le focus sur votre entrée

    var app = angular.module('myApp',[]);
var focus_key=-1;
app.directive('lineKey', function () {
    return function (scope, element, attrs) {
        if(focus_key==scope[attrs.ngModel]){
            focus_key=-1;
            element[0].focus();
        }
    };
});

    enfin, ajouter le " update_key' méthode de votre contrôleur

    app.controller('mainCtrl',['$scope'],function($scope){
        $scope.records = [
        {'key1':'val1'},
        {'key2':'val2'}
    ];
    $scope.update_key=function(obj,new_key,id){
        var keys    = Object.keys(obj);
        var values  = Object.values(obj);
        var old_key = keys[id];
        if(keys.indexOf(new_key)==-1&&new_key.length>0){
            //clear ...
            for(var i=0,key;key=keys[i];i++){   delete obj[key];    }
            keys[id]=new_key;//... change key value ...
            focus_key=new_key;//... notify to keep focus on modifyed input ...
            //... and refill to preserve the position in the object list
            for(var i=0,key;key=keys[i];i++){   obj[key]=values[i]; }
        }
    };
}

    OriginalL'auteur yorg