动态分配ng-model

Question

我正在尝试从对象数组生成一组复选框.我的目标是让复选框动态地将他们的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/

有人可以帮忙吗？

Answer 1

这应该会给你想要的结果:

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

这是一个有效的插件:http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR？p = preview

Answer 2

编辑 正如在使用ng-change的注释中正确指出的那样,需要预先存在"虚拟"ng模型.然而,应该注意到,显然有1.3,框架提供了所需的选项.请查看下面的/sf/answers/1985586081/! /编辑

如果你像我一样在一个简单的案例中遇到更复杂的任务,这就是我想出的将任意表达式动态绑定到ng-model的解决方案: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-model的表达式.

我希望这能让人不必担心这个解决方案.

此致,Justus

Answer 3

使用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 }">

有关更多信息,请ngModelOptions访问:https://docs.angularjs.org/api/ng/directive/ngModelOptions