ng-modelを動的に割り当てる

オブジェクト配列から一連のチェックボックスを生成しようとしています。チェックボックスで、ng-modelを配列に送信される新しいオブジェクトのプロパティに動的にマップすることを目指しています。

私が考えていたのは

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

このJSFiddleで見られるように、これは機能しません。

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

誰か助けてもらえますか？

これにより、望ましい結果が得られるはずです。

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

これが機能するプランクです：http：//plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR？p = Preview

編集 これをng-changeで使用するコメントに正しく記載されているように、「ダミー」のng-modelが事前に存在している必要があります。ただし、明らかに1.3では、必要なオプションがフレームワークによって提供されていることに注意してください。以下のhttps://stackoverflow.com/a/28365515/3497830をチェックしてください！ /編集

より複雑なタスクを実行しているときに単純なケースに遭遇した場合に備えて、これは、任意の式をng-modelに動的にバインドするために私が思いついたソリューションです。 http //plnkr.co/edit/ccdJTm0zBnqjntEQfAfx？p =プレビュー

方法：標準の角度式を受け取り、それを評価し、ng-modelと$ compileを介して結果をスコープにリンクするディレクティブdynamicModelを作成しました。

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

使用法は単純にdynamic-model = "angularExpression"であり、angularExpressionは、ng-modelの式として使用される文字列になります。

これにより、このソリューションを考え出す必要があるという頭痛の種が軽減されることを願っています。

よろしく、ジャスタス

Angular 1.3では、ng-model-optionsディレクティブを使用してモデルを動的に割り当てたり、式にバインドしたりできます。

ここにプランカーがあります：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 }">

詳細については、httpsngModelOptions：//docs.angularjs.org/api/ng/directive/ngModelOptionsをご覧ください。

これは、より深い表現をサポートするための私のアプローチです。例： 'model.level1.level2.value'

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

ここで、item.modelPath = 'level1.level2'およびUtility（model、 'level1.level2'）は、model.level1.level2を返すユーティリティ関数です。