AngularJS，形成並顯示JSON數據

Question

這是我的代碼：

PizzaStore.html ：

  <!DOCTYPE html>
    <html ng-app="PizzaApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Cool pizza for everyone!</title>
        <link href="Site.css" rel="stylesheet" />

        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>
        <script src="js/App.js"></script>
    </head>
    <body>

            <div>

                        <a href="#/">Home</a>
                        <a href="#confirm/">Send order</a>
            </div>
            <br />
        <div ng-view></div>

    </body>
    </html>

Pizzas.html ：

   <div id="content">
        <div class="item" ng-repeat="pizza in pizzas">
            <p>{{pizza.name}}</p>
            <img src="{{pizza.src}}" />
            <div align="center" ng-if="pizza.available === true"><span ng-click="increment($index)">+</span> {{pizza.count}} <span ng-click="decrement($index)">-</span></div>
            <p style="color: red" ng-if="pizza.available === false">Unavailable</p>
        </div>
    </div>

App.js ：

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

var model = [{ "name":"Pizza one", "src":"/images/1.jpg", "available": true},
         { "name":"Pizza two", "src":"/images/2.jpg", "available": true },
         { "name":"Pizza three", "src":"/images/3.jpg", "available": true},
         { "name":"Pizza four", "src":"/images/4.jpg", "available": false}];

PizzaApp.config(function ($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl: 'Pizzas.html',
            controller: 'pizzasController'
        })

        .when('/confirm', {
            templateUrl: 'Confirm.html',
            controller: 'confirmController'
        });
});

PizzaApp.controller('pizzasController', function ($scope) {

    $scope.pizzas = model;
    for (var i = 0; i < $scope.pizzas.length; i++) {
        $scope.pizzas[i].count = 0;
    }

    $scope.increment = function (index) {
        $scope.pizzas[index].count += 1;
    };

    $scope.decrement = function (index) {
        if ($scope.pizzas[index].count >0)
            $scope.pizzas[index].count -= 1;
    };
});

PizzaApp.controller('confirmController', function ($scope) {


});

它工作正常，可以顯示數據，但是我想在JSON中將新模型從PizzaStore.html發送到Confirm.html （目前為空）。 之后，我想在該視圖上顯示JSON數據。 我一直在嘗試以多種方式解決此問題，但仍然找不到合適的解決方案。

如果可能的話，不要回答以下問題： 您可以使用...。 看到真正的解決方案會有用得多。

非常感謝您的關注！

Answer 1

創建服務：

PizzaApp.service('orderService', [orderService]);

function orderService(){
    var _order = undefined;

    return {
        getOrder: function(){
            if(typeof _order !== 'undefined'){
                return _order;
            }
        },
        setOrder: function(order){
            _order = order;
        }
    }
}

然后將服務注入到您的控制器中，當用戶單擊確認訂單時，您可以使用orderService.setOrder（order）設置訂單，並使用orderService.getOrder（）在確認訂單頁面上檢索它。

AngularJS，形成並顯示JSON數據

問題描述

1 個解決方案

解決方案1
0 2015-05-24 14:32:08

AngularJS，形成並顯示JSON數據

問題描述

1 個解決方案

解決方案1 0 2015-05-24 14:32:08

解決方案1
0 2015-05-24 14:32:08