Динамически назначать ng-модель

Я пытаюсь создать набор флажков из массива объектов. Я стремлюсь, чтобы флажки динамически отображали свою ng-модель на свойство нового объекта, который будет отправлен в массив.

Я имел в виду что-то вроде

<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-модели заранее. Однако следует отметить, что, очевидно, в версии 1.3 необходимые параметры были предусмотрены фреймворком. Пожалуйста, проверьте https://stackoverflow.com/a/28365515/3497830 ниже! /РЕДАКТИРОВАТЬ

На всякий случай, если вы, как и я, спотыкаетесь в простом случае, имея более сложную задачу, это решение, которое я придумал для динамической привязки произвольных выражений к ng-модели: http://plnkr.co/edit/ccdJTm0zBnqjntEQfAfx?p = предварительный просмотр

Метод: я создал директиву dynamicModel, которая принимает стандартное угловое выражение, оценивает его и связывает результат с областью действия через ng-model и $ 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);
            });
        }
    };
}]);

Используется просто dynamic-model = "angularExpression", где angularExpression приводит к строке, которая используется в качестве выражения для ng-модели.

Я надеюсь, что это избавит кого-то от головной боли от необходимости придумывать это решение.

С уважением, Юстус

В Angular 1.3 вы можете использовать ng-model-optionsдирективу для динамического присвоения модели или привязки к выражению.

Вот такой 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 }">

Подробнее ngModelOptionsздесь: https://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.