Javascript ng repeat中的动态ng模型名称

Javascript ng repeat中的动态ng模型名称,javascript,angularjs,Javascript,Angularjs,我正在尝试创建一个表单,允许在Angularjs中将带有name和age字段的person对象附加到数组中,但无法正确渲染字段名。以下是不起作用的代码: %tr %td{ 'ng-repeat' => 'h in maintitles' } %input{ :type => 'text', :value => '{{h.name}}', 'ng-model' => 'newPerson.' + '{{h.name}}' } %td

我正在尝试创建一个表单,允许在Angularjs中将带有name和age字段的person对象附加到数组中,但无法正确渲染字段名。以下是不起作用的代码:

  %tr
    %td{ 'ng-repeat' => 'h in maintitles' }
      %input{ :type => 'text', :value => '{{h.name}}', 'ng-model' => 'newPerson.' + '{{h.name}}' }
    %td
      %button{ 'ng-click' => 'addItem(newItem)' } Add
(haml的编译是正确的——每个输入字段都有一个
ng model
属性
newPerson.{{h.name}
,而
value
字段正确地呈现为
{h.name}
的值,而不是文本“{h.name}”——因此问题肯定在javascript中。)

如果我手动命名每个字段,例如:

  %tr
    %td{ 'ng-repeat' => 'h in maintitles' }
      %input{ :type => 'text', :value => '{{h.name}}', 'ng-model' => 'newPerson.name' }
    %td{ 'ng-repeat' => 'h in maintitles' }
      %input{ :type => 'text', :value => '{{h.name}}', 'ng-model' => 'newPerson.age' }
    %td
      %button{ 'ng-click' => 'addItem(newItem)' } Add
然后一切按预期进行

如何获得角度,以便在ng模型指令中使用变量


编辑:根据Yaroslav的回答,我通过创建
maintitles
数组的克隆来解决这个问题,其中包含一个空数据字段以保存新值:

function AdminItemCtrl($scope, $http, $routeParams) {
    $scope.titlename = $routeParams.itemType;

    $http.get('/data/' + $scope.titlename + 'items.json').success(function(data) {
        $scope.maintitles = data.titles;
        $scope.main = data.data;
        $scope.emptyItem = angular.copy($scope.maintitles);

        for (var i = 0; i < $scope.emptyItem.length; i++) {
            delete $scope.emptyItem[i].editable;
            $scope.emptyItem[i].data = '';
        }

        $scope.cleanEmpty = angular.copy($scope.emptyItem);
    });

    $scope.addItem = function(newItem) {
        var newObject = {};

        for (var i = 0; i < newItem.length; i++)
            newObject[newItem[i].name] = newItem[i].data;

        $scope.main.push(newObject);
        $scope.emptyItem = angular.copy($scope.cleanEmpty);
    };
}

简而言之,Angular不支持这一点
NgModelController
在插值之前获取其名称,因此在错误的名称下发布。有一个开放的(悬挂7个月了)。我得稍微修一下才能让它工作。我回答了一个问题,你可以在那里读到一些细节。还有一个

  %tr
    %td{ 'ng-repeat' => 'h in emptyItem' }
      %input{ :type => 'text', :placeholder => '{{h.name}}', 'ng-model' => 'h.data' }
    %td
      %button{ 'ng-click' => 'addItem(emptyItem)' } Add