Fatal编程技术网
  • javascript/
  • Javascript 如何访问另一个html文件中的ng repeat expression，为不同的数组值创建一个html页面

Javascript 如何访问另一个html文件中的ng repeat expression，为不同的数组值创建一个html页面

javascript angularjs

Javascript 如何访问另一个html文件中的ng repeat expression，为不同的数组值创建一个html页面,javascript,angularjs,Javascript,Angularjs,angular JS的新特性 这是主html页面，我想传递{{Product.detail}}在ng上单击另一个detail.html，将有一个detail.html，但在不同的{Product.Names}上单击它将根据{{Product.Names}更改细节，这是一个简单的方法 <!doctype html> <html lang="en" ng-app="LoginHome"> <head> <meta charset="

angular JS的新特性 这是主html页面，我想传递{{Product.detail}}在ng上单击另一个detail.html，将有一个detail.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>
您需要设置详细信息页面，以便将产品id作为url参数。 似乎您完全缺少一个产品id，我建议您最好使用一个

然后，详细信息页面可以获取此url参数，进行api调用以获取此产品的详细信息，如图像、名称、价格等，并显示该产品的详细信息

它是相同的详细信息页面，适用于任何产品。然后，在您现在构建的列表视图中，您只需将
a href
链接到右侧的详细信息页面，并将产品id作为url参数传入即可

已更新

首先，让我们将产品id添加到产品定义中

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）的方法从该数组返回一行，其中id与产品id匹配。 展望未来，这些产品将需要保存在数据库中，并通过一些API返回，因此该服务将在这一步提供帮助

现在，让我们创建一个新的html页面，并向其中添加一个新的控制器。称之为详细信息页面和详细信息控制器。这个控制器需要注入
$routeParams
，这样我们就可以得到
$routeParams.productId
。要使路由参数正常工作，请继续说明如何在应用程序中为此url和其他url设置路由参数。 一旦我们从
$routeParams
中获得了
productId
，我们就可以调用APIService（需要注入），比如：
APIService.getProductDetails（$routeParams.productId）
，这将返回产品详细信息（我们上面定义的数组中的一个项）

这样，我们就可以在
$scope
中填充我们想要在呈现页面上显示的内容。

您使用的是angularjs路由器吗？因为设置$window.location并不是一个好办法。不，对于视图，我使用了它，但没有成功“没有成功”怎么办？你肯定不想对angularjs应用程序进行整版刷新。首先，它完全违背了使用angular的目的。path遇到了一些问题，例如在何处（/主页）…它向我显示“未找到的页面”无法找到，这就是为什么使用window.Location。我建议这是您需要解决的问题。是的，根据给定的答案，您可以使用产品id设置URL参数。但是重新加载页面意味着重新加载所有应用程序，angularjs应用程序不是轻量级的。这就是ui路由器的设计目的。如果你能给出任何简短的代码，因为JS和angular JS的新版本更新了更多的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"}];