Question

我的页面中有两个组件。组件A称为仪表板，并包含通过ng-repeat的元素列表，我们称之为系统。每个系统都将通过组件B显示，组件B特别适用于此系统元素，它称为 SystemView 。每个系统视图都有一个日志条目列表，我现在想要的是显示带有未读日志条目数量的徽章。如果我打开系统条目，我可以设置要读取的日志条目，则应该更改未读日志条目的数量。为了您的理解：system.logEntries是一个日志条目列表。

HTML

<some-accordion-control>
  <div ng-repeat="system in systems">
    <h3>{{system.name}} <span class="badge">{{system.unreadLogEntries}} of {{system.logEntries.length}}</span>
    <system-view system="system"></system-view>
  </div>
</some-accordion-control>

JS SystemView控制器

module.exports = {
  template: 'some.html',
  controller: SystemView,
  bindings: {
    system: '<'
  }
};

function SystemView() {
    // ... some code
}

SystemView.prototype = {
  setRead: function () {
    // this is an example that i change the value of unreadLogEntries
    // this did not work in the dashboard component
    system.unreadLogEntries--;
    // i tried this and it worked in the dashboard component
    system.logEntries.push({
      message: "Hello World!"
    });
  }
};

我的问题是，日志条目列表可能会更改并获取有关其值的新信息。但是简单的整数字段unreadLogEntries不是。

有人可以帮助我吗？

Answer 1

好的，我做了以下事情来达到这个目的：

我删除了unreadLogEntries字段并添加了一个控制器函数来计算附加的日志条目列表中的未读日志条目。

这在HTML中：

<span class="badge">{{$ctrl.countUnread(system.logEntries)}} of {{system.logEntries.length}}</span>

作为我的控制者的一部分：

SystemView.prototype = {
  setRead: function () {
    // ...
  },

  countUnread: function (logEntries) {
    var unread = 0;
    for(var i = 0; i < logEntries.length; i++) {
      if(logEntries[i].isUnread) { unread++; }
    }
    return unread;
  }
};

这对我有用。也许有更好的解决方案，但这解决了我的问题。

角度组件绑定但没有数据传输

1 个答案: