Делаю небольшое англуляр прилождение ,которое отображает количество курсов в таблице, по чекбоксу пользователь выбирает прошел ли он тот или иной курс. Я хочу вывести статистику по количество пройденных курсов, но не могу сообразить как.
<!DOCTYPE html>
<html ng-app="courseListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="lib/angular.js"></script>
<script>
// Модель
var model = {
user: "User1",
courses: [{ name: "HTML, CSS", passed: true },
{ name: "JavaScript Essential", passed: true },
{ name: "JavaScript Advanced", passed: true },
{ name: "HTML5 & CSS3", passed: false },
{ name: "AngularJS", passed: false }]
};
// Модуль
var courseListApp = angular.module("courseListApp", []);
// Контроллер
courseListApp.controller("CourseListCtrl", function ($scope) {
$scope.data = model;
// Обработчик нажатия по кнопке
$scope.addNewCourse = function () {
$scope.data.courses.push({
name: $scope.courseName,
passed: "No"
});
$scope.courseName = "";
}
$scope.setStyle = function(passed){
return passed ? "color:green": "color:red";
}
$scope.showText = function(passed){
return passed ? "Да": "Нет";
}
});
</script>
<title>Document</title>
</head>
<body ng-controller="CourseListCtrl">
<div class="container">
<div class="page-header">
<div class="page-header">
<h1>
Планировщик курсов.
</h1>
<h3>Пользователь: {{data.user}}. Количество курсов - {{data.courses.length}}</h3>
<p>Пройдено {{}}</p>
</div>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" ng-model="courseName" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="addNewCourse()">Добавить</button>
</span>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>Курс</th>
<th></th>
<th>Пройден</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="course in data.courses">
<td>{{course.name}}</td>
<td><input type="checkbox" ng-model="course.passed"/></td>
<td>
<span style ="{{setStyle(course.passed)}}">
{{showText(course.passed)}}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Хочу вывести все вот сюда <p>Пройдено {{}}</p>
Спасибо!