ngRoute 在 angularjs/multiple 次观看中

Question

我正在学习教程 angular。我正在使用 ngRoute 来嫁接 2 套 views/controllers。

customers.html 和 cutomersController 和 orders.html 和订单控制器。

当 index.html 加载时，它会根据需要显示 customers.html。但是当我点击 'View Orders' link 时，它没有显示订单详情。

link为代码：http://plnkr.co/DW2rqiFIkxnhVPPisfLn

这是 index.html

的代码

    <!DOCTYPE html>
<html ng-app="customersApp">
<head>
<title>Route 2</title>
</head>
<body>

    <div ng-view></div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="customersController.js"></script>
<script src="ordersController.js"></script>

</body>
</html>

这是 app.js

的代码

        var app = angular.module('customersApp', ['ngRoute']);

    app.config(function($routeProvider){
        $routeProvider
            .when('/', {
                controller: 'CustomersController',
                templateUrl: 'customers.html'   
            })
            .when('/orders/:customerId', {
                controller: 'OrdersController',
                templateUrl: 'orders.html'  
            })

            .otherwise( { redirectTo: '/' });

});


here is the code for customersController.js


app.controller('CustomersController', function ($scope){
        $scope.sortBy= 'name';
        $scope.reverse  = false;

        $scope.customers=[
            {
                id: 1, 
                joined: '2000-12-02',
                name:'John', 
                city:'Sacramento', 
                orderTotal:7.554,
                orders: [
                    {
                        id:1,
                        product: 'Shoes',
                        total: 7.554
                    }
                    ]
            },
            {
                id:2,
                joined: '2012-12-07', 
                name:'Tom', 
                city:'Chandler', 
                orderTotal:19.99,
                orders: [
                    {
                        id:2,
                        product: 'Baseball',
                        total: 9.995
                    },
                    {
                        id:3,
                        product: 'Bat',
                        total: 9.995
                    }
                    ]
            },
            {
                id: 3,
                joined: '1997-05-02', 
                name:'Matt', 
                city:'Michigan', 
                orderTotal:19.993,
                order:  [
                    {
                        id:4,
                        product: 'Tiara',
                        total: 19.993
                    }
                    ]
            },
            {
                id: 4,
                joined: '2001-10-08', 
                name:'Jane', 
                city:'New York', 
                orderTotal:112.954,
                order:  [
                    {
                        id:5,
                        product: 'Stereo',
                        total: 112.954
                    }
                    ]
            }
            ];

$scope.doSort = function(propName){
            $scope.sortBy = propName;
            $scope.reverse = !$scope.reverse;
        };
});

这是 OrdersController.js

的代码

    (function(){
var OrdersController = function ($scope, $routeParams){
        var customerId = $routeParams.customerId;
        $scope.orders = null;

        function init() {
        // Search for the customers for the customer id
        for(var i=0, len=$scope.customers.length; i<len;i++){
            if ($scope.customers[i].id === parseInt(customerId)) {
                $scope.orders = $scope.customers[i].orders;
                break;
                }
            }
        }


        $scope.customers=[
            {
                id: 1, 
                joined: '2000-12-02',
                name:'John', 
                city:'Sacramento', 
                orderTotal:7.554,
                orders: [
                    {
                        id:1,
                        product: 'Shoes',
                        total: 7.554
                    }
                    ]
            },
            {
                id:2,
                joined: '2012-12-07', 
                name:'Tom', 
                city:'Chandler', 
                orderTotal:19.99,
                orders: [
                    {
                        id:2,
                        product: 'Baseball',
                        total: 9.995
                    },
                    {
                        id:3,
                        product: 'Bat',
                        total: 9.995
                    }
                    ]
            },
            {
                id: 3,
                joined: '1997-05-02', 
                name:'Matt', 
                city:'Michigan', 
                orderTotal:19.993,
                order:  [
                    {
                        id:4,
                        product: 'Tiara',
                        total: 19.993
                    }
                    ]
            },
            {
                id: 4,
                joined: '2001-10-08', 
                name:'Jane', 
                city:'New York', 
                orderTotal:112.954,
                order:  [
                    {
                        id:5,
                        product: 'Stereo',
                        total: 112.954
                    }
                    ]
            }
            ];
            init();
        };

        OrdersController.$inject = ['$scope', '$routeParams'];
        angular.module('customersApp')
            .controller('OrdersController', OrdersController);
}());

这是 customers.html

的代码

    <h2>Customers</h2>
Filter: <input type="text" ng-model="customersFilter.name"/>
<br /><br />
<table>
    <tr>
        <th ng-click="doSort('name')">Name</th>
        <th ng-click="doSort('city')">City</th>
        <th ng-click="doSort('orderTotal')">Order Total</th>
        <th ng-click="doSort('joined')">Joined</th>
    </tr>
    <tr data-ng-repeat="cust in customers | filter:customersFilter | orderBy:sortBy:reverse">
        <td>{{cust.name}}</td>
        <td>{{cust.city}}</td>
        <td>{{cust.orderTotal | currency}}</td>
        <td>{{cust.joined | date:'longDate'}}</td>
        <td><a href="#/orders/{{ cust.id }}">View Orders</a></td>
    </tr>
    </table>
<br />
<span>Total customers: {{customers.length}}</span>

这是 orders.html

的代码

    <h2>Orders</h2>
<table>
    <tr>
        <th>Product></th>
        <th>Total</th>
    </tr>
    <tr ng-repeat="order in orders">
        <td>{{order.product}}</td>
        <td>{{order.total |currency}}</td>
    </tr>
</table>

提前致谢！

Answer 1

幸运的是，这是一个简单的修复。出于某种原因，您的 JSON 不统一。虽然这两个 customers 在他们的订单数组中只有一个订单，但 order 数组需要重命名为 orders，对于 Matt 和 Jane。

您只需要在 ordersController.js 中编辑这个硬编码的 JSON 就可以了。

{ id: 3, joined: '1997-05-02', name:'Matt', city:'Michigan', orderTotal:19.993, order: [ { id:4, product: 'Tiara', total: 19.993 } ] }, { id: 4, joined: '2001-10-08', name:'Jane', city:'New York', orderTotal:112.954, order: [ { id:5, product: 'Stereo', total: 112.954 } ] } ];

同时你应该编辑这个循环 for(var i=0, len=$scope.customers.length; i<len;i++){ if ($scope.customers[i].id === parseInt(customerId)) { $scope.orders = $scope.customers[i].orders; break; } } }

这是使用 forEach 方法的好地方。 $scope.customers.forEach(function(customer) { if (customer.id === parseInt(customerId) { $scope.orders = customer.orders; }) }); 它更现代一点，也更容易阅读。

ngRoute 在 angularjs/multiple 次观看中

ngRoute in angularjs/multiple views

angularjs-routing

ngroute