Как получить доступ к выражению ng-repeat в другом файле html, чтобы создать одну страницу html для разных значений массива - PullRequest
Новая
       0

Как получить доступ к выражению ng-repeat в другом файле html, чтобы создать одну страницу html для разных значений массива

0 голосов
/ 07 января 2020

Новое для angular JS Вот главная страница html, я хочу передать {{Product.detail}} по щелчку мышью на другую деталь. html, будет одна деталь. html но при различном щелчке {{Product.Names}} он изменит детали в соответствии с {{Product.Names}}, и это очень простой способ. 

<!doctype html>
<html lang="en" ng-app="LoginHome">

    <head>
        <meta charset="utf-8">
        <title>Shop</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="HomeStyle.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
        <script type="text/javascript" src="HomeScript.js"></script>

        <body>
            <div>
                <div ng-controller="HomeController">
                    <h1>Products</h1>
                    <div class="product-card" ng-repeat="Product in Products">
                        <div class="image-card" >
                            <div class="imagepadding">
                                <img  class="responsiveImage"ng-src="{{Product.images}}"></img>
                            </div>
                            <div class="Title-Price">
                                <label class="text-Font" ng-click="goToDetail(Product.detail)">
                                    {{Product.Names}}

                                </label>
                                <label class="text-Font">
                                    {{Product.Price}}

                                </label>
                                <button class="buyBtn">Add to Cart</button>
                            </div>                
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </head>
</html>

Ниже приведен javascript файл с контроллером 

    var app=angular.module('LoginHome',['ngRoute']);
    app.controller('HomeController',['$scope','$window',function($scope, $window){

    $scope.Products=[
    {images: 'D:/angular/shop/src/home/robot3.jpg',Names: "ASIMO ", Price: "$1000",detail: "hello" },
    {images:"D:/angular/shop/src/home/robot2.jfif",Names: "Bionic Hand", Price: "$2000",detail: "hi"},
    {images:"D:/angular/shop/src/home/robot4.jpg",Names: "Turtle Bot", Price: "$3000",detail: "heyyy"}];


    $scope.goToDetail=
                function(){

                $window.location="D:/angular/shop/src/home/details.html";//Here i want to pass {{Product.detail}} to detail.html on particular ng-click to show only the detail of only that array object


            }
        }]);

1 Ответ

0 голосов
/ 07 января 2020

Вам необходимо настроить страницу с подробной информацией, чтобы в качестве параметра url использовался идентификатор продукта. Похоже, что вы вообще не указали идентификатор продукта, я бы рекомендовал иметь его.

Тогда страница сведений может принять этот параметр URL, сделать вызов API, чтобы получить подробную информацию об этом продукте, например, изображение, название, цена и др. c. и отобразить их для этого продукта.

Это та же страница сведений, которая работает для любого продукта. Затем в представлении списка, которое вы создали сейчас, просто свяжите a href с нужной страницей сведений с идентификатором продукта, переданным в качестве параметра url.

ОБНОВЛЕНО

Для начала добавим идентификатор продукта в определение продукта. 

products= [
    {id: '1', images: 'D:/angular/shop/src/home/robot3.jpg',Names: "ASIMO ", Price: "$1000",detail: "hello" },
    {id: '2', images:"D:/angular/shop/src/home/robot2.jfif",Names: "Bionic Hand", Price: "$2000",detail: "hi"},
    {id: '3', images:"D:/angular/shop/src/home/robot4.jpg",Names: "Turtle Bot", Price: "$3000",detail: "heyyy"}];

Кроме того, давайте разместим это определение где-нибудь еще, например в Сервисе. (См. Это руководство о том, как создать службу). Эта служба должна называться, назовем ее APIService. И метод в этом сервисе с именем getProducts () возвращает этот массив. Другой метод с именем getProductDetailsById (id) возвращает одну строку из этого массива, где идентификатор соответствует идентификатору продукта. В дальнейшем эти продукты должны быть сохранены в базе данных и возвращены через некоторые API, поэтому этот сервис поможет на этом этапе.

Теперь давайте создадим новую страницу html и добавим в нее новый контроллер. , Назовите это страницами деталей и деталей контроллера. Этому контроллеру нужно ввести $routeParams, чтобы мы могли получить $routeParams.productId. Чтобы параметры маршрута работали, следуйте этому руководству , чтобы узнать, как настроить его для этого URL-адреса и других параметров в приложении. Как только мы получим productId из $routeParams, мы можем вызвать этот APIService (должен быть введен) как: APIService.getProductDetails($routeParams.productId), и это вернет сведения о продукте (один из элементов в массиве, как мы определили выше) .

Таким образом мы можем заполнить то, что нам нужно, чтобы $scope отображалось на отображаемой странице.

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

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

...