试图创建AngularJS

Question

我想创建一个通知徽章通知徽章的角链接面板。我非常接近，但我遇到了两个问题。第一个是我想要的类从“activeLink”更改为“visitedLink”不切换与NG-点击类。第二个是我只想返回徽章中归类为activeLinks的物品。

https://jsfiddle.net/mvk0851x/9/

标记

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

控制器

(function(){ 
    var app = angular.module('deliverablesApp', []) 
    app.controller('NoteCtrl', function($scope){ 
     $scope.noteCount = [ 
     { 
      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 
     }]; 
    }); 
})(); 

Answer 1

要对应用程序状态的更多的控制，你应该把它保存在你的模型 - 而不是类列表。

我的理解有两个问题在这里：

1. 点击项目之一触发所有项目变更的className。
2. 有错误数在第一行示出通知。

为了解决这两个，你应该把数据模型。例如：

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

你看到visited: false在每个项目的收集。 现在你能

1. 轨道独立
2. 过滤所以，现在你的模板应该是如下参观项目

参观项目：

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

下一步是创建Note类在它来封装这种逻辑。例如（ES6）

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()">