I want to declare the global variable $scope , but I'm using a function
call WineCtr() , but when I try to declare the $scope , ['$scope', function($scope){} in this way, I can not detect the code.
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="Ctrl as ctrl">
<h3>Categories</h3>
<div ng-repeat="category in ctrl.getCategories()">
<label>
<input type="checkbox" ng-model="ctrl.filter[category]" />
{{ category }}
</label>
</div>
<hr />
<input type="text" ng-model="busqueda" />
<h3>Available Wines</h3>
<div ng-repeat="wine in (ctrl.wines | filter:ctrl.filterByCategory) |filter:busqueda as filteredWines">
{{ wine.name }} <i>({{ wine.category }})</i>
</div>
<hr />
{{holis}}
<b>Number of results: {{ filteredWines.length }}</b>
</div>
</body>
</html>
angular.
module('myApp', []).
controller('Ctrl', WineCtrl, ['$scope', function($scope){
}]);
function WineCtrl() {
var self = this;
// Variables - Public
self.filter = {};
self.wines = [
{name: 'Apartamentos 1', category: 'Apartamento'},
{name: 'Apartamentos 2', category: 'Casa'},
{name: 'Apartamentos 3', category: 'Casa Apartamento'},
{name: 'Apartamentos 4', category: 'Apartamento'},
{name: 'Apartamentos 5', category: 'Hotel'},
{name: 'Apartamentos 6', category: 'Apartamento'},
{name: 'Apartamentos 7', category: 'Casa Apartamento'},
{name: 'Apartamentos 8', category: 'Hotel'}
];
// Functions - Public
self.filterByCategory = filterByCategory;
self.getCategories = getCategories;
// Functions - Definitions
function filterByCategory(wine) {
return self.filter[wine.category] || noFilter(self.filter);
}
function getCategories() {
return (self.wines || []).
map(function (wine) { return wine.category; }).
filter(function (cat, idx, arr) { return arr.indexOf(cat) === idx; });
}
function noFilter(filterObj) {
return Object.
keys(filterObj).
every(function (key) { return !filterObj[key]; });
}
}