3

我正在尝试创建一个表单，该表单允许将具有名称和年龄字段的人员对象附加到 Angularjs 中的数组中，但我无法正确呈现字段名称。这是不起作用的代码：

  %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

然后一切都按预期工作。

如何让 Angular 让我在 ng-model 指令中使用变量？

编辑：根据雅罗斯拉夫的回答，我通过创建一个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);
    };
}

然后在 HAML 中：

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

1 回答 1

2

简而言之，Angular 不支持这一点。NgModelController在插值之前获取它的名称，因此在错误的名称下发布。有一个开放的github 问题（现在挂了 7 个月）。我必须稍微修复一下 Angular 才能让它工作。我回答了一个类似的问题，您可以在其中阅读一些详细信息。还有一个固定 Angular 的工作示例。

于 2013-04-28T14:24:00.820 回答