web-dev-qa-db-fra.com

AngularJS ng-bind avec une fonction

Je souhaite afficher un format de tableau pour la section Pièces jointes. J'ai les données de recherche et de résultats. Les deux ont une colonne commune de attachmentTypeId. Je souhaite afficher la description de la catégorie de pièce jointe en fonction de l'identifiant. Dans le ng-bind j'ai essayé une tentative, cela n'a pas fonctionné. 

J'utilise une fonction dans le ng-bind, j'espère que l'approche est fausse, attendez-vous à une alternative.

La attachmentLookup contient la 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"
  }];

Et les données attachmentDetails de la base de données en tant que,

  $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 en tant que,

<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 le code getCatgoryName du contrôleur est,

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

Sample Plunker: http://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc

angularjsangularjs-ng-repeatng-bind
13
Arulkumar

Les crochets sont cochés, donc la fonction sera appelée pour chaque $digest.

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

Par conséquent, ng-bind ne s'appliquera que lorsque la variable ou la valeur transmise changera réellement.

Avec une fonction, vous ne transmettez pas une variable, elle ne sera donc pas déclenchée pour chaque $digest.

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

J'ai mis à jour le lecteur 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;
  };
10
Donal

Une autre façon de faire la même chose 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>

La fonction du contrôleur a également été modifiée de cette manière:

$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