dans angularjs, comment assigner dynamiquement un ng-model ?

Question

Bonjour, j'essaie de générer un ensemble de cases à cocher à partir d'un tableau d'objets, je souhaite que les cases à cocher fassent dynamiquement correspondre leur modèle ng à une propriété du nouvel objet qui sera soumis dans le tableau.

Ce que j'avais à l'esprit est quelque chose comme

<li ng-repeat="item in items">
    <label>{{item.name}}</label>
    <input type="checkbox" ng-model="newObject.{{item.name}}">
</li>

cela ne fonctionne pas comme on peut le voir sur cette jsfiddle :

http://jsfiddle.net/GreenGeorge/NKjXB/2/

Quelqu'un peut-il m'aider ?

Answer 1

Cela devrait vous donner les résultats souhaités :

<input type="checkbox" ng-model="newObject[item.name]">

Voici un plunk qui fonctionne : http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR?p=preview

Answer 2

Au cas où vous seriez comme moi en train de trébucher sur un cas simple alors que vous avez une tâche plus complexe, voici la solution que j'ai trouvée pour lier dynamiquement des expressions arbitraires à des ng-model : http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p=preview

Méthode : J'ai créé une directive dynamicModel qui prend une expression angulaire standard, l'évalue et lie le résultat à la portée via ng-model et $compile.

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

app.controller('MainCtrl', function($scope) {
  $scope.data = {};
  $scope.testvalue = 'data.foo';
  $scope.eval = $scope.$eval;
});

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

app.controller('MainCtrl', function($scope) {
  $scope.data = {};
  $scope.testvalue = 'data.foo';
  $scope.eval = $scope.$eval;
});

app.directive('dynamicModel', ['$compile', function ($compile) {
    return {
        'link': function(scope, element, attrs) {
            scope.$watch(attrs.dynamicModel, function(dynamicModel) {
                if (attrs.ngModel == dynamicModel || !dynamicModel) return;

                element.attr('ng-model', dynamicModel);
                if (dynamicModel == '') {
                    element.removeAttr('ng-model');
                }

                // Unbind all previous event handlers, this is 
                // necessary to remove previously linked models.
                element.unbind();
                $compile(element)(scope);
            });
        }
    };
}]);

L'utilisation est simplement dynamic-model="angularExpression" où angularExpression donne une chaîne qui est utilisée comme expression pour ng-model.

J'espère que cela évitera à quelqu'un de se casser la tête pour trouver cette solution.

Regards, Justus