Fatal编程技术网
  • javascript/
  • Javascript AngularJS，形成并显示JSON数据

Javascript AngularJS，形成并显示JSON数据

javascript html json angularjs

Javascript AngularJS，形成并显示JSON数据,javascript,html,json,angularjs,Javascript,Html,Json,Angularjs,这是我的密码： 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>

这是我的密码：

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>

   <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) {


});

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（函数（$routeProvider）{
$routeProvider
。当（“/”{
templateUrl:'Pizzas.html'，
控制器：“pizzasController”
})
。当（“/确认”{
templateUrl:'Confirm.html'，
控制器：“confirmController”
});
});
PizzaApp.controller（'pizzasController'，函数（$scope）{
$scope.pizzas=型号；
对于（变量i=0；i<$scope.pizzas.length；i++）{
$scope.pizzas[i].count=0；
}
$scope.increment=函数（索引）{
$scope.pizzas[index].count+=1；
};
$scope.decrement=函数（索引）{
如果（$scope.pizzas[index].count>0）
$scope.pizzas[index].count-=1；
};
});
PizzaApp.controller（'confirmController'，函数（$scope）{
});
它工作正常，显示数据，但我想将新模型从
PizzaStore.html
发送到
Confirm.html
（现在它是空的）JSON。之后，我想在该视图上显示JSON数据。我一直试图用多种方法解决这个问题，但仍然找不到合适的解决办法

如果可能的话，不要回答这样的问题：你可以用。。。。看到真正的解决方案会有用得多

非常感谢您的关注

创建服务：

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（）在确认订单页面上检索该订单

如果您想在控制器之间共享模型，您应该考虑编写一个角度服务来保存模型实例。然后，您可以将服务注入控制器中，以检索您感兴趣的模型。