AngularJS ng-bind with a function
Solution 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;
};
Solution 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;
}
})
};
Arulkumar
Learning from Down vote(s)! தீதும் நன்றும் பிறர்தர வாரா; Time Zone: UTC + 05:30 Chennai #SOreadytohelp Top fifth question asker in Meta Stack Exchange Stack Overflow all time ranking: Top ranking #14552 (05 September 2019) Current ranking #16892 (16 November 2019)
Updated on July 09, 2022Comments
-
Arulkumar almost 2 years
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 theng-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 theattachmentDesc
,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
-
Asim K T almost 8 yearsWill
ng-bind="getCatgoryName(attachment.attachmentTypeId)"
work? calling a function inside ng-bind doesn't seem to work. can you please tell why? -
Donal almost 8 yearsHi, @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.