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

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 — user1817574
– user1817574, Commented May 25, 2015 at 11:48
@TeoMor: Thanks its solved the issue, post this comment as Answer, i will accept it. — Arulkumar
– Arulkumar, Commented May 25, 2015 at 11:53

Donal · Accepted Answer · 2016-06-08 07:27:19Z

11

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

edited Jun 8, 2016 at 7:27

answered May 25, 2015 at 12:04

Donal

33.2k10 gold badges69 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asim K T Over a year ago

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

Donal Over a year ago

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.

Mahima Agrawal · Accepted Answer · 2016-09-21 08:24:29Z

1

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;
            }
        })
    };

answered Sep 21, 2016 at 8:24

Mahima Agrawal

1,4351 gold badge14 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-bind with a function

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related