Ng-Modell dynamisch zuweisen

Ich versuche, eine Reihe von Kontrollkästchen aus einem Objektarray zu generieren. Ich möchte, dass die Kontrollkästchen ihr ng-Modell dynamisch einer Eigenschaft des neuen Objekts zuordnen, das an das Array gesendet wird.

Was ich vorhatte, ist so etwas wie

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

Dies funktioniert nicht, wie auf dieser JSFiddle zu sehen ist:

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

Kann jemand helfen?

Dies sollte Ihnen die gewünschten Ergebnisse liefern:

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

Hier ist ein funktionierender Plunk: http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR?p=preview

BEARBEITEN Wie in den Kommentaren korrekt angegeben, erfordert die Verwendung dieser Option mit ng-change, dass zuvor ein "Dummy" -ng-Modell vorhanden ist. Es sollte jedoch beachtet werden, dass anscheinend mit 1.3 die erforderlichen Optionen vom Framework bereitgestellt wurden. Bitte überprüfen Sie https://stackoverflow.com/a/28365515/3497830 unten! /BEARBEITEN

Nur für den Fall, dass Sie wie ich über einen einfachen Fall stolpern, während Sie eine komplexere Aufgabe haben, ist dies die Lösung, die ich gefunden habe, um beliebige Ausdrücke dynamisch an ng-model zu binden: http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p = Vorschau

Methode: Ich habe eine Direktive dynamicModel erstellt, die einen Standardwinkelausdruck verwendet, ihn auswertet und das Ergebnis über ng-model und $ compile mit dem Bereich verknüpft.

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);
            });
        }
    };
}]);

Die Verwendung ist einfach dynamic-model = "angularExpression", wobei angularExpression zu einer Zeichenfolge führt, die als Ausdruck für ng-model verwendet wird.

Ich hoffe, das erspart jemandem die Kopfschmerzen, diese Lösung finden zu müssen.

Grüße, Justus

Mit Angular 1.3 können Sie mithilfe der ng-model-optionsDirektive das Modell dynamisch zuweisen oder an einen Ausdruck binden.

Hier ist ein Plunkr: http://plnkr.co/edit/65EBiySUc1iWCWG6Ov98?p=preview

<input type="text" ng-model="name"><br>
<input type="text" ng-model="user.name" 
ng-model-options="{ getterSetter: true }">

Weitere Informationen finden Sie ngModelOptionshier: https://docs.angularjs.org/api/ng/directive/ngModelOptions

Dies ist mein Ansatz, um einen tieferen Ausdruck zu unterstützen, z. B. 'model.level1.level2.value'.

<input class="form-control" ng-model="Utility.safePath(model, item.modelPath).value">

Dabei ist item.modelPath = 'level1.level2' und Utility (Modell, 'level1.level2') die Utility-Funktion, die model.level1.level2 zurückgibt