AngularJS ng-bind avec une fonction

Je veux montrer un format de tableau pour la section des pièces Jointes. J'ai de la recherche et des données sur les résultats. Les deux ont une colonne commune de attachmentTypeId. Je veux montrer l'attachement description de la catégorie en fonction de l'id. Dans le ng-bind j'ai essayé une tentative, il n'est pas travaillé.

Je suis en utilisant une fonction dans le ng-bindl'espoir, l'approche est erronée, s'attendre à un autre pour l'approche.

La attachmentLookup contient les attachmentDescattachmentTypeId

  $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"
  }];

Et la attachmentDetails les données de la base de données,

  $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"
  }];

Le code HTML aussi,

<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>

Et la getCatgoryName code du contrôleur,

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

Échantillon Plunker: http://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc

source d'informationauteur Arulkumar

  1. 9

    Les crochets sont sales vérifié, donc la fonction qui sera appelée pour chaque $digest.

    Ce ng-bind est une directive, il utilise un observateur sur ce qui est passé à ng-bind.

    Par conséquent, ng-bind sera le seul applicable, lorsque le passé de la variable ou la valeur ne change effectivement.

    Avec une fonction, vous n'êtes pas en passant une variable, donc il ne sera pas le feu pour chaque $digest.

    Il est donc préférable d'utiliser des crochets avec un appel de fonction.

    J'ai mis à jour le plunker ici: http://plnkr.co/edit/LHC2IZ0Qk9LOOYsjrjaf?p=preview

    J'ai changé le code HTML ici:

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

    La fonction a également été modifiée: 

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

    return desc;
  };
  2. 1

    La une autre façon de faire la même chose, c'est comme ci-dessous:

    <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>

    Fonction de contrôleur a également été modifié de cette façon:

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