我想显示“附件”部分的表格格式。我有查询和结果数据。两者都有一个共同的列attachmentTypeId。我想显示基于ID的附件类别描述。在ng- bind我尝试过的尝试中,它没有用。
attachmentTypeId
ng- bind
我在中使用一个函数ng-bind,希望方法错误,期望该方法有一个替代方案。
ng-bind
该attachmentLookup包含attachmentDesc,attachmentTypeId
attachmentLookup
attachmentDesc
$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" }];
和attachmentDetails来自数据库的数据一样,
attachmentDetails
$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" }];
HTML代码为
<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>
getCatgoryName控制器的代码是
getCatgoryName
$scope.getCatgoryName = function (attachmentTypeId) { angular.forEach($scope.attachmentLookup, function (attachemnt) { if (attachemnt.attachmentTypeId === attachmentTypeId) return attachemnt.attachmentDesc; }); };
样本柱塞:http ://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc
括号是否经过脏检查,因此每个函数都会被调用$digest。
$digest
这ng-bind是一条指令,它将在传递给的内容上使用观察者ng-bind。
因此,ng-bind仅在传递的变量或值确实发生更改时才适用。
使用函数时,您没有传递变量,因此不会为每个变量触发$digest。
因此,最好在函数调用中使用方括号。
我在这里更新了插件:http ://plnkr.co/edit/LHC2IZ0Qk9LOOYsjrjaf?p=preview
我在这里更改了HTML:
<tr ng-repeat="a in attachmentDetails"> <td> <span>{{a.fileName}}</span></td> <td>|</td> <td> {{ getCatgoryName(a.attachmentTypeId) }}</td> </tr>
该功能也已修改:
$scope.getCatgoryName = function(attachmentTypeId) { var desc = ""; angular.forEach($scope.attachmentLookup, function(attachemnt) { if (parseInt(attachemnt.attachmentTypeId) == attachmentTypeId) desc = attachemnt.attachmentDesc; }); return desc; };