web-dev-qa-db-ja.com

AngularJS ng-bind with function

[添付ファイル]セクションの表形式を表示したい。ルックアップと結果のデータがあります。両方ともattachmentTypeIdの共通の列を持っています。 IDに基づいて添付カテゴリの説明を表示したい。 ng-bindで試してみましたが、うまくいきませんでした。

私はng-bindで関数を使用しています。アプローチが間違っていることを望み、アプローチの代替を期待しています。

attachmentLookupにはattachmentDesc、attachmentTypeIdが含まれます

  $scope.attachmentLookup = [{
    "attachmentDesc": "Category One",
    "attachmentTypeId": "1"
  }, {
    "attachmentDesc": "Category Two",
    "attachmentTypeId": "2"
  }, {
    "attachmentDesc": "Category Three",
    "attachmentTypeId": "3"
  }, {
    "attachmentDesc": "Category Four",
    "attachmentTypeId": "4"
  }, {
    "attachmentDesc": "Category Five",
    "attachmentTypeId": "5"
  }];

そして、データベースからのattachmentDetailsデータとして、

  $scope.attachmentDetails = [{
    "attachmentId": "001",
    "fileName": "File Name 001",
    "attachmentTypeId": "1"
  }, {
    "attachmentId": "003",
    "fileName": "File Name 003",
    "attachmentTypeId": "2"
  }, {
    "attachmentId": "005",
    "fileName": "File Name 005",
    "attachmentTypeId": "3"
  }, {
    "attachmentId": "007",
    "fileName": "File Name 007",
    "attachmentTypeId": "1"
  }, {
    "attachmentId": "009",
    "fileName": "File Name 009",
    "attachmentTypeId": "2"
  }, {
    "attachmentId": "011",
    "fileName": "File Name 011",
    "attachmentTypeId": "3"
  }];

HTMLコードは、

<table>
  <thead>
    <tr>
      <th>File Name</th>
      <th>|</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="attachment in attachmentDetails">
      <td> <span ng-bind="attachment.fileName"></span>
      </td>
      <td>|</td>
      <td> <span ng-bind="getCatgoryName(attachment.attachmentTypeId)"></span>
      </td>
    </tr>
  </tbody>
</table>

そして、コントローラーからのgetCatgoryNameコードは、

$scope.getCatgoryName = function (attachmentTypeId) {
    angular.forEach($scope.attachmentLookup, function (attachemnt) {
        if (attachemnt.attachmentTypeId === attachmentTypeId)
            return attachemnt.attachmentDesc;
    });
};

サンプルプランカー： http://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc

angularjsangularjs-ng-repeatng-bind
13
Arulkumar

括弧はダーティチェックされているため、関数は$digestごとに呼び出されます。

このng-bindはディレクティブであり、ng-bindに渡されるものについてウォッチャーを使用します。

したがって、ng-bindは、渡された変数または値が実際に変更された場合にのみ適用されます。

関数では、変数を渡していないため、すべての$digestに対して変数は起動しません。

したがって、関数呼び出しでブラケットを使用することをお勧めします。

ここでプランカーを更新しました： http://plnkr.co/edit/LHC2IZ0Qk9LOOYsjrjaf?p=preview

ここでHTMLを変更しました。

<tr ng-repeat="a in attachmentDetails">
    <td> <span>{{a.fileName}}</span></td>
    <td>|</td>
    <td> {{ getCatgoryName(a.attachmentTypeId) }}</td>
</tr>

関数も変更されました：

  $scope.getCatgoryName = function(attachmentTypeId) {
    var desc = "";
    angular.forEach($scope.attachmentLookup, function(attachemnt) {
      if (parseInt(attachemnt.attachmentTypeId) == attachmentTypeId)
        desc = attachemnt.attachmentDesc;
    });

    return desc;
  };
10
Donal

同じことをする別の方法は以下のようなものです：

<tr ng-repeat="delivery in deliveries">
<td>{{delivery.pickup}}</td>
<td>{{delivery.destination}}</td>
<td>{{getVehicleDescription(delivery) || (delivery.isVehicleDescription ? delivery.modelType : delivery.vehicleType)}}</td></tr>

コントローラー機能も次のように変更されました。

$scope.getVehicleDescription = function(delivery){
        $scope.roads.map(function(road){
            if(road.modelTypeID == delivery.vehicleType && !delivery.isVehicleDescription){
                delivery.modelType = road.modelType;
                delivery.isVehicleDescription = true;
            }
        })
    };
1
Mahima Agrawal