AngularJS ng-bind与函数

Question

我想显示"附件"部分的表格格式.我有查询和结果数据.两者都有一个共同的列attachmentTypeId.我想基于id显示附件类别描述.在ng-bind我尝试过的尝试中,它没有奏效.

我正在使用一个函数ng-bind,希望方法是错误的,期望一个替代的方法.

该attachmentLookup包含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"
  }];

而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控制器的代码是,

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

括号被脏检查,因此每次都会调用该函数$digest.

这ng-bind是一个指令,它将使用观察者传递给什么ng-bind.

因此,ng-bind仅当传递的变量或值确实发生变化时才会应用.

使用函数,您不会传递变量,因此不会为每个变量触发$digest.

因此,最好使用带有函数调用的括号.

我在这里更新了plunker: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;
  };