Как получить доступ к массиву из моего shopController в моем cartController, чтобы отобразить все элементы (и удалить при желании)? - PullRequest
Новая
       0

Как получить доступ к массиву из моего shopController в моем cartController, чтобы отобразить все элементы (и удалить при желании)?

1 голос
/ 13 июня 2019

Я не могу понять, как разделить массив между двумя контроллерами. Один Контроллер предназначен для заполнения массива, а другой представляет данные и позволяет пользователю удалять элементы из массива.

Структура моего файлы являются: 

templates/cart.html 

templates/shop.html 

app.js

index.html

Я попробовал услугу маршрута.

Я ожидаю, что смогу вставить пользовательский ввод в массив в "shopController" и представить эту информацию в шаблоне с помощью второго контроллер называется «cartController» и позволяет пользователям удалять элементы, если желательно.

app.js 

//reference routing in order to route and render templates
var myApp=angular.module("myApp", []); 

//create the the routing for the app
myApp.config(['$routeProvider',
    function($routeProvider){

        $routeProvider.
            when('/shop', {
                templateUrl: 'templates/shop.html',
                controller: 'shopController',
                //items: array
            }).
            when('/cart', {
                templateUrl: 'templates/cart.html',
                controller: 'cartController',
                //items: array
            }).
            otherwise({
                redirectTo: '/shop'
            });

    }]);
//factory that holds data that can be shared between controllers
myApp.service('CartContents', function(){
    //var that should hold all user input
    var privateCart = [];

    var additem = function(newitem){
        privateCart.push(newitem);
    };

    var viewCart = function(){
        return privateCart;
    };

    return {
        additem: additem,
        viewCart: viewCart
    };
});


myApp.controller('cartController', function($scope, CartContents){
    $scope.message = "Cart Page";
    /*call the factory function viewCart in order to view all contents of the array*/
    $scope.items = CartContents.viewCart();
    
});

//contrller functions that manage what each page/template does
myApp.controller('shopController', function($scope, CartContents){
    $scope.message = "Shopping Page";
    $scope.items = CartContents.viewCart();
    /*call the factory function additem in order to push currItem into an array*/
    $scope.selectOrder = function(currItem){
        CartContents.additem(currItem);
        $scope.items = CartContents.viewCart();
    };
});
<!DOCTYPE html>
<html lang ="en">
    <head>
        <title>Simple Web App</title>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

        <style>
                body {
                  padding-top: 10px;
                  background-color: #F5F5F5;
                }
        </style>
    </head>

    <body ng-app="myApp">                                          <!--Angulars way of declaring a root element of the app-->
        <div class="container">
            <div class="row">
                <div class="col-1">
                    <ul class="nav">
                        <li><a href="#shop">Shop</a></li>   <!--Refrence the .html files that will be separate pages-->
                        <li><a href="#cart">View Order</a></li>
                    </ul>
                </div>
                <div class="col-2">
                    <div ng-view></div>                          <!--.html templates will be rendered here-->
                </div>
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

cart.html 

<h1> Cart Page </h1>
{{message}}

<div ng-model = "cartContents">
    <ul>
        <!--angular loops and displays every string in an array-->
        <li ng-repeat="item in items"> {{item}} </li>
    </ul>
</div>

shop.html 

<h1> Shopping Page </h1>
{{message}}

<div class = "selectItem">
    <input type="text" ng-model="currItem" placeholder = "Select Item">
    <!--basically cal the function selectorder() in my app.js file to add an item-->
    <button ng-click="selectOrder(currItem)">Select</button>
    <ul>
        <!--angular loops and displays every string in an array-->
        <li ng-repeat="item in items"> {{item}} </li>
    </ul>
</div>

Ответы [ 2 ]

0 голосов
/ 14 июня 2019

На странице покупок отсутствует аргумент: 

<h1> Shoping Page </h1>
{{message}}

<div class = "selectItem">
    <input type="text" ng-model="currItem" placeholder = "Select Item">
    ̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶e̶l̶e̶c̶t̶O̶r̶d̶e̶r̶(̶)̶"̶>̶S̶e̶l̶e̶c̶t̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
    <button ng-click="selectOrder(currItem)">Select</button>
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
</div>

Также его контролеру необходимо получить items из сервиса: 

myApp.controller('shopController', function($scope, /*$route*/CartContents){
    $scope.message = "Shopping Page";
    ̶/̶/̶v̶a̶r̶ ̶i̶t̶e̶m̶s̶ ̶=̶ ̶$̶r̶o̶u̶t̶e̶.̶c̶u̶r̶r̶e̶n̶t̶.̶i̶t̶e̶m̶s̶;̶
    $scope.items = CartContents.viewCart();

    $scope.selectOrder = function(currItem){
        CartContents.additem(currItem);
        $scope.items = CartContents.viewCart();
    };
});
0 голосов
/ 14 июня 2019

Вы должны создать сервис для передачи информации от одного контроллера к другому. 

myApp.service('exampleService', function() {
    this.cartContents = [];

    this.addContents = function(newObj) {
      cartContents.push(newObj);
    };

    this.getContents = function(){
        return cartContents;
    };
}

Тогда вы захотите внедрить сервис по зависимостям в каждый контроллер.В одном контроллере вы бы добавили в массив через сервис.В другом случае вы получите массив из службы. 

myApp.controller('cartController', function($scope, exampleService, /*$route*/CartContents){
    $scope.message = "Cart Page";
    var items = exampleService.getContents();
    $scope.checkout = CartContents.viewCart();

});
myApp.controller('shopController', function($scope, exampleService, /*$route*/CartContents){
    $scope.message = "Shopping Page";
    //var items = $route.current.items;
    $scope.selectOrder = function(currItem){
        CartContents.additem(currItem);
    };
    exampleService.addContents(CartContents);
});

Дайте мне знать, если у вас есть какие-либо вопросы!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...