angularjs tutorial code debug

Question

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>

DavidEdwards · Accepted Answer · 2015-03-06 04:40:30Z

2

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

answered Mar 6, 2015 at 4:40

DavidEdwards

5933 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mxp · Accepted Answer · 2015-03-06 04:50:12Z

0

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

edited Mar 6, 2015 at 4:50

answered Mar 6, 2015 at 4:15

mxp

1806 bronze badges

6 Comments

hello world Over a year ago

i have that included in my sportsStore.js file

mxp Over a year ago

Can you post the content of sportsStore.js or make a plunker?

mxp Over a year ago

You put the ng-app on the wrong spot put it on the body. See this

DavidEdwards Over a year ago

ng-app can go on the html tag. it just makes the whole file an angular app instead of just the body.

mxp Over a year ago

Is there a typo on the code? The template says selectCategory and the controller says selectedCategory. See this edit: My comment was 30s late, see DavidEdward's comment

|

Collectives™ on Stack Overflow

angularjs tutorial code debug

2 Answers 2

Comments

6 Comments

Your Answer

Collectives™ on Stack Overflow

angularjs tutorial code debug

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest