angularjs教程代码调试

angularjs tutorial code debug

本文关键字：调试 代码 教程 angularjs      更新时间：2023-09-26

我通过一本Apress书学习angularjs，遇到了一些不起作用的代码，我试图调试，但我的控制台没有给我任何错误或任何东西。也许一些专家可以指导我解决问题，谢谢。

customFilters.js文件

// 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文件

//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}
        ]
    };
});

我的productListControllers.js文件

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文件

<!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>

您的html文件中有一个拼写错误。已选择该功能Category而未选择Category。

有一个打字错误，模板显示selectCategory，控制器显示selectedCategory

相关文章：