Учу ангулар, хочу сделать витрину товаров, при нажатии на кнопку с ценой итогавая сумма отображалась бы в total, что не так?
app.js
var drinksApp = angular.module('drinksApp',[]);
drinksApp.controller('drinkListController',
function drinkListController($scope) {
$scope.drinks = [];
$scope.toggleActive = function(d){
d.active = !d.active;
};
$scope.total = function(){
var total = 0;
angular.forEach($scope.drinks, function(d){
if (d.active){
total = total + d.price;
}
});
return total;
};
});
drink-list.component.js
angular.
module('drinksApp').
component('drinkList', {
templateUrl:'app/list.template.html',
controller: function drinkListController() {
this.drinks = [
{
name: 'Кока Колла',
snippet: 'Качественный освежающий напиток.',
price: 50
}, {
name: 'Спрайт',
snippet: 'Прозрачный цвет и вкус лимона.',
price: 90
}, {
name: 'Тархун',
snippet: 'Лучшее, что придумал свет.',
price: 200
}, {
name: 'Колокольчик',
snippet: 'Зазвенит в ушах 100проц.',
price: 25
}
];
}
});
angular.
module('drinksApp').
component('sidebar', {
templateUrl:'app/sidebar.template.html'
});
<!doctype html>
<html lang="en" ng-app="drinksApp">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body >
<h1>Автомат напитков</h1>
<p>1+2 = {{1+2}}</p>
<div class="row centered" ng-controller="drinkListController">
<div class="col-lg-8">
<div class="col-lg-3" ng-repeat="drink in $ctrl.drinks ">
<h2>
<span>{{drink.name}}</span>
</h2>
<p>{{drink.snippet}}</p>
<button ng-click="toggleActive()" ng-class="{active:drink.active}">{{drink.price}}</button>
</div>
</div>
<div class="col-lg-4">
<sidebar></sidebar>
<h3>Total: <span>{{total()}}</span></h3>
</div>
</div>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="drink-list.component.js"> </script>
</body>
</html>
Средний
