带有函数的 AngularJS ng-bind [英] AngularJS ng-bind with a function

问题描述

我想显示附件部分的表格格式.我有查找和结果数据.两者都有一个共同的 attachmentTypeId 列.我想根据 id 显示附件类别描述.在 ng-bind 中，我尝试了一次尝试，但没有成功.

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.

我在 ng-bind 中使用了一个函数，希望该方法是错误的，期待该方法的替代方法.

I am using a function in the ng-bind, hope the approach is wrong, expect an alternate for the approach.

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数据，

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

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 代码是，

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

样品 Plunker:http://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc

Sample Plunker: http://plnkr.co/edit/dZy5gW4q9CxWF2NszXYc

推荐答案

括号是脏检查的，因此每个$digest都会调用该函数.

The brackets are dirty checked, therefore the function will be called for every $digest.

这个 ng-bind 是一个指令，它将使用一个观察者来观察传递给 ng-bind 的内容.

This ng-bind is a directive, it will use a watcher on what is being passed to ng-bind.

因此，ng-bind 仅在传递的变量或值确实发生变化时才适用.

Therefore, ng-bind will only apply, when the passed variable or value does actually change.

对于函数，您不会传递变量，因此它不会为每个 $digest 触发.

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.

我在这里更新了 plunker:http://plnkr.co/edit/LHC2IZ0Qk9LOOYsjrjaf?p=预览

I have updated the plunker here: http://plnkr.co/edit/LHC2IZ0Qk9LOOYsjrjaf?p=preview

我在这里更改了 HTML:

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>

功能也做了修改:

  $scope.getCatgoryName = function(attachmentTypeId) {
    var desc = "";
    angular.forEach($scope.attachmentLookup, function(attachemnt) {
      if (parseInt(attachemnt.attachmentTypeId) == attachmentTypeId)
        desc = attachemnt.attachmentDesc;
    });

    return desc;
  };

这篇关于带有函数的 AngularJS ng-bind的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！