Question

我正试图以角度在对象中创建一个动态对象，但我不知道该怎么做。

以下是HTML代码段：

<div ng-controller="appCtrl">
  <table>
    <tr data-ng-repeat='role in roles' >
      <td>{{role.name}}</td>
      <td>:</td>
      <td>
        Total<input data-ng-model="mgmtData[roles[$index].code].total" type='number' min="0"/>
        <br>
        {{mgmtData.GM.total}}
    </tr>
  </table>
</div>

这是控制器代码段：

app.controller('appCtrl', function($scope) { 

  $scope.mgmtData = {};

  $scope.roles = [
    {
      name: "General Manager",
      code: "GM"
    },
    {
      name: "Transport Manager",
      code: "TM"
    },
    {
      name: "Safety Executive",
      code: "SE"
    }
  ];

});

我希望它看起来像这样：

<div ng-controller="appCtrl">
  <table>
    <tr>
      <td>General Manager</td>
      <td>:</td>
      <td>
        Total<input data-ng-model="mgmtData.GM.total" type='number' min="0"/>
        <br>
        {{mgmtData.GM.total}}
    </tr>
    <tr>
      <td>Transport Manager</td>
      <td>:</td>
      <td>
        Total<input data-ng-model="mgmtData.TM.total" type='number' min="0"/>
        <br>
        {{mgmtData.TM.total}}
    </tr>
    <tr>
      <td>Safety Executive</td>
      <td>:</td>
      <td>
        Total<input data-ng-model="mgmtData.SE.total" type='number' min="0"/>
        <br>
        {{mgmtData.SE.total}}
    </tr>
  </table>
</div>

这样做的正确方法是什么？我一直得到的是无法设置未定义的属性总数。我假设这是因为mgmtData当前是空的。但是，我不知道如何解决它

非常感谢任何帮助：）

Answer 1

您的mgmtData对象为空。鉴于这个问题，你可能希望像这样构建你的对象。

$scope.mgmtData = {
                   TM: {total: 'value'},
                   TM: {total: 'value'},
                   SE: {total: 'value'}
                  };

只有这样你才能访问属性。

这里的想法是ng-model可以自动为你创建范围对象内的属性，但它不会为你在范围对象中创建对象。

Answer 2

正如H所提到的，您的$scope.mgmtData未初始化，另一种解决方案是在迭代过程中使用ng-init对其进行初始化。每当$ scope.roles数组更改时，此方法可能会有用。例如从服务器请求新角色

将此添加到您的控制器

$scope.initMgmtData = function(index) {
  $scope.mgmtData[$scope.roles[index].code] = {
    total: 0
  }
}

将$ scope.initMgmtData添加到ng-init指令，理想情况是在ng-model范围内使用ng-repeat指令之前。

<input ng-init="initMgmtData($index)" data-ng-model="mgmtData[role.code].total" type="number" min="0" />

Associated PLUNKER

动态创建一个新的ngmodel，用于绑定ng重复

2 个答案: