AngularJS ng-bind with a function

Question

I want to show a table format for the Attachments section. I have the lookup and results data. Both have a common column of attachmentTypeId. I want to show the attachment category description based on the id. In the ng-bind I tried an attempt, it's not worked.

I am using a function in the ng-bind, hope the approach is wrong, expect an alternate for the approach.

The attachmentLookup contains the 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"
  }];

And the attachmentDetails data from the database as,

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

The HTML code as,

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

And the getCatgoryName code from the controller is,

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

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

Voluptuary

When you do return attachemnt.attachmentDesc you basically return from the forEach callback and the forEach method returns undefined. You should save the result in an array and return the array: plnkr.co/edit/fvA4ZYZ7yJubJ58ch8GT?p=preview – Hysterectomy

@TeoMor: Thanks its solved the issue, post this comment as Answer, i will accept it. – Voluptuary

Answer 1

The brackets are dirty checked, therefore the function will be called for every $digest.

This ng-bind is a directive, it will use a watcher on what is being passed to ng-bind.

Therefore, ng-bind will only apply, when the passed variable or value does actually change.

With a function, you are not passing a variable, therefore it will not fire for every $digest.

It is therefore, better to use brackets with a function call.

I have updated the plunker here: http://plnkr.co/edit/LHC2IZ0Qk9LOOYsjrjaf?p=preview

I have changed the HTML here:

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

The function has also been modified:

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

    return desc;
  };

Kantos

Will ng-bind="getCatgoryName(attachment.attachmentTypeId)" work? calling a function inside ng-bind doesn't seem to work. can you please tell why? – Homoiousian

Hi, @AsimKT. The brackets are dirty checked, therefore the function will be called for every $digest. This ng-bind is a directive, it will use a watcher on what is being passed to ng-bind. Therefore, ng-bind will only apply, when the passed variable or value does actually change. With a function, you are not passing a variable, therefore it will not fire for every $digest. It is therefore, better to use brackets with a function call. – Kantos

Answer 2

The another way to do the same thing is like below:

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

Controller function has also been modified in this way:

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

Dualpurpose