CODEWITHSUNDEEP
javascripthtmlangularjs
hello world
hello world

Reputation: 1765

angularjs tutorial code debug

im learning angularjs thru an Apress book and I've come across some code that doesnt work, ive tried to debug but my console isnt giving me any errors or anything. Maybe some experts can guide me thru whats wrong, thanks.

customFilters.js file

// Creating a custom filter
// arguments for the filter method is unique and a factory function that returns a filter function that does the actaul work
angular.module('customFilters',[]).filter('unique', function() {
    return function(data, propertyname) {
        if (angular.isArray(data) && angular.isString(propertyname)) {
            var results = [];
            var keys = {};
            for (var i = 0; i  < data.length; i++) {
                var val = data[i][propertyname];
                if (angular.isUndefined(keys[val])) {
                    keys[val] = true;
                    results.push(val);
                }
            }
            return results;
        } else {
            return data;
        }
    } 
});

sportsStore.js file

//declaring a dependency called customFilters that contains a unqiue filter
angular.module('sportsStore',['customFilters']);

// calling the angular.module method passing in sportsStore located in app.html
angular.module('sportsStore').controller('sportsStoreCtrl', function($scope) {
    $scope.data = {
        products: [
            {name: "Product 1", description:"A product", category:"Category #1", price: 100},
            {name: "Product 2", description:"A product", category:"Category #1", price: 110},
            {name: "Product 3", description:"A product", category:"Category #2", price: 210},
            {name: "Product 4", description:"A product", category:"Category #3", price: 202}
        ]
    };
});

my productListControllers.js file 

angular.module('sportsStore').controller('productListCtrl', function($scope,$filter){
   var selectedCategory = null;
   $scope.selectedCategory = function(newCategory) {
        selectedCategory = newCategory;
   };
   $scope.categoryFilterFn = function(product) {
        return selectedCategory == null || product.category == selectedCategory;
   };
});

app.html file

<!DOCTYPE html>
<!-- We are defining the sportStore module here in the html tag-->
<html ng-app="sportsStore">
    <head>
        <title>Sports Store</title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap-theme.min.css" rel="stylesheet" />
    </head>
    <!-- Applying ng-controller to the body tagg -->
    <body ng-controller="sportsStoreCtrl">
        <div class="navbar navbar-inverse">
            <a class="navbar-brand" href="#">Sports Store</a>
        </div>
        <div class="panel panel-default row" ng-controller="productListCtrl">
            <div class="col-xs-3">
                <a class="btn btn-block btn-default btn-lg" ng-click="selectCategory()">Home</a>
        <!-- generating the navigation elements here -->
        <a class="btn btn-block btn-default btn-lg" ng-repeat="item in data.products |orderBy:'category'| unique:'category'" ng-click="selectCategory(item)">{{item}}</a>
            </div>
            <div class="col-xs-8">
        <!-- ng-repeat generates elements for each object in an array -->
        <!-- we also create a local variable called item --> 
        <div class="well" ng-repeat="item in data.products | filter:categoryFilterFn">
            <h3>
            <strong>{{item.name}}</strong>
            <span class="pull-right label label-primary">{{item.price | currency}}</span>
            </h3>
            <span class="lead">{{item.description}}</span>
        </div>
            </div>
        </div>




        <script src="angular.js"></script>
    <script src="controllers/sportsStore.js"></script>
    <script src="filters/customFilters.js"></script>
    <script src="controllers/productListControllers.js"></script>
    </body>
</html>

Upvotes: 0

Views: 137

Answers (2)

mxp
mxp

Reputation: 180

There is a typo, the template says selectCategory and the controller says selectedCategory

Upvotes: 0

DavidEdwards
DavidEdwards

Reputation: 593

You have a typo in your html file. The function is selectedCategory not selectCategory.

Upvotes: 2

Related Questions