Javascript 正在尝试在AngularJS中创建通知标记

我正在尝试创建一个通知徽章和一个链接面板。我很接近，但我遇到了两个问题。首先，我希望将类从“activeLink”更改为“visitedLink”，而不是使用ng click切换类。第二，我只想返回在徽章中被归类为ActiveLink的项目

加价

<div ng-app='deliverablesApp'>
  <div class="notes" ng-controller="NoteCtrl">NOTIFICATIONS <span class="badge">{{noteCount.length}}</span>
    <ul>
      <li ng-repeat="note in noteCount | limitTo: 4" >
        <a ng-click="changeLink = !changeLink" 
           ng-class="{'activeLink': !changeLink, 'visitedLink': changeLink}"
           href="#"
           >
          {{note.update}}
        </a>
        <br />
        <cite>{{note.date | date: 'medium'}}</cite>
      </li>
    </ul>
  </div>
</div>

---

为了更好地控制应用程序状态，您应该将其存储在模型列表中，而不是类列表中

据我所知，这里有两个问题：

单击其中一个项目将触发所有项目以更改类名

第一行中显示的通知数量错误

要解决这两个问题，您应该将数据放置到模型中。例如：

$scope.notes = [
    {
        update:"Sample text for Note 1",
        link:"note-update-link",
        date: 1441133965418,
        visited: false
    },
    {
        update:"Sample text for Note 2",
        link:"note-update-link",
        date: 1441129965418,
        visited: false
    },
    {
        update:"Sample text for Note 3",
        link:"note-update-link",
        date: 1440629965418,
        visited: false
    },
    {
        update: "Sample text for Note 4",
        link:"note-update-link",
        date: 1440622965418,
        visited: false
    },
    {
        update: "Sample text for Note 5",
        link:"note-update-link",
        date: 1440621765418,
        visited: false
    }
];

您是否在每个收藏项目中看到

已访问：false

。 现在你可以

独立跟踪访问的项目

筛选访问的项目

因此，现在您的模板应如下所示：

<li ng-repeat="note in notes" >
  <a
    ng-click="note.visited = true"
    ng-class="{'activeLink': !note.visited, 'visitedLink': note.visited}"
    href="#">
      {{note.update}}
  </a>
  <br />
  <cite>{{note.date | date: 'medium'}}</cite>
</li>

下一步是创建

Note

类来封装其中的逻辑。例如（ES6）

课堂笔记{
构造函数（参数）{
Object.assign（此参数）；
this.visted=false；
}
访问（）{
这是真的；
}
}
...
$scope.notes=[
{
更新：“注释1的示例文本”，
链接：“注意更新链接”，
日期：1441133965418
},
{
更新：“注释2的示例文本”，
链接：“注意更新链接”，
日期：1441129965418
},
{
更新：“注释3的示例文本”，
链接：“注意更新链接”，
日期：1440629965418
},
{
更新：“注释4的示例文本”，
链接：“注意更新链接”，
日期：1440622965418
},
{
更新：“注释5的示例文本”，
链接：“注意更新链接”，
日期：1440621765418
}].map（函数（数据）{
返回新票据（数据）；
});
...

单击其中一个项目时，是否要阻止所有项目中的类别更改？

<li ng-repeat="note in notes" >
  <a
    ng-click="note.visited = true"
    ng-class="{'activeLink': !note.visited, 'visitedLink': note.visited}"
    href="#">
      {{note.update}}
  </a>
  <br />
  <cite>{{note.date | date: 'medium'}}</cite>
</li>

var visitedNotes = $scope.notes.filter(function (item) {
    return !item.visited;
});

class Note {
  constructor(params) {
    Object.assign(this, params);
    this.visited = false;
  }

  visit() {
    this.visited = true;
  }
}


...

$scope.notes = [
    {
        update:"Sample text for Note 1",
        link:"note-update-link",
        date: 1441133965418 
    },
    {
        update:"Sample text for Note 2",
        link:"note-update-link",
        date: 1441129965418
    },
    {
        update:"Sample text for Note 3",
        link:"note-update-link",
        date: 1440629965418
    },
    {
        update: "Sample text for Note 4",
        link:"note-update-link",
        date: 1440622965418
    },
    {
        update: "Sample text for Note 5",
        link:"note-update-link",
        date: 1440621765418
    }].map(function (data) {
      return new Note(data);
    });

...

<a ng-click="note.visit()">