0

angular のオブジェクト内に動的オブジェクトを作成しようとしていますが、その方法がわかりません。

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 が現在空であるためだと思います。しかし、私はそれを解決する方法についての手がかりがありません

どんな助けでも大歓迎です:)

4

2 に答える 2

0

hasH が述べたように、あなた$scope.mgmtDataは初期化されていません。これに対する代替ソリューションはng-init、反復プロセス中に初期化するために使用することです。このメソッドは、 $scope.roles 配列が変更されるたびに役立つ場合があります。例: サーバーから新しいロールをリクエストする

これをコントローラーに追加します

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

理想的には、スコープ内でディレクティブng-initを使用する前に、$scope.initMgmtData をディレクティブに追加します。ng-modelng-repeat

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

関連プランカー

于 2014-05-29T05:05:10.257 に答える