angularjs - 在 ngrepeat 中动态创建一个新的 ngmodel 进行绑定

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

正如hasH所提到的，你$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" />

相关 PLUNKER