Arulkumar Arulkumar - 5 months ago 13
AngularJS Question

AngularJS ng-bind with a function

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

Answer

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