0

我有一个使用 ng-repeat 从服务中显示的项目列表。所有这些项目都有一个“完整项目详细信息”链接 (item.html)。将显示更多信息的通用页面。

将单击的项目的数据传递给 item.html 以便显示的信息来自单击的项目的最佳方法是什么？

HTML 看起来像：

<div class="container" ng-app="myApp">
    <div ng-controller="ItemController">
        <div ng-repeat="item in data.details">
            <div class="wrapper">
                <h3>{{item.title}}</h3>
                <p>{{item.description}}</p>
                <a href="#myModal" class="btn" openmodal>Open modal</a>
                <a href="item.html">View full item details</a>
            </div>
        </div>
    </div>
</div>

角

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

myApp.factory('Data', function(){
    var Data = {};  
    Data.details = [
        {
            "id": 1,
            "title": "Item 1",
            "description": "Post 1 description - Nullam ac tellus sed mi laoreet placerat.",
            "more": "more info"
        },
        {   
            "id": 2,
            "title": "Item 2",
            "description": "Post 2 description - Cociis natoque penatibus et magnis dis parturient montes.",
            "more": "more info"

        },
        {
            "id": 3,
            "title": "Item 3",
            "description": "Post 3 description - Nullam ac tellus sed mi laoreet placerat.",
            "more": "more info"
        }
    ]
    return Data;
});

// Controller
function ItemController($scope, Data){
    $scope.data = Data;
}

提前致谢

编辑

我为每条路线创建了路线和 HTML 页面，然后使用 ng-view 显示适当的内容。

请参阅下面的代码：

// Routes
myApp.config(function($routeProvider){
    $routeProvider
        .when('/', {
                templateUrl:"home.html"
        })
        .when('/task', {
                templateUrl:"item.html"
        })
})

// Controller
function ItemController($scope, $location, Item){
    $scope.data = Item;

    $scope.viewDetail = function(item) {
        $scope.currItem= item;
        $location.path('/item');
    }
}

现在 index.html 看起来像这样：

<div class="container">
    <ng-view></ng-view>
</div>

然后我为我的路线创建了单独的文件：

主页.html

<div class="container" ng-app="myApp">
    <div ng-controller="ItemController">
        <div ng-repeat="item in item.details">
            <h3>{{item.title}}</h3>
            <a ng-click="viewDetail(item)">View full item details</a>
        </div>
    </div>
</div>

项目.html

<div class="container" ng-app="myApp">
    <div ng-controller="ItemController">
        <h3>{{currItem.title}}</h3>
        <p>{{currItem.description}}</p>
    </div>
</div>

我在 home.html 中的链接（查看完整的项目详细信息）使用 ng-click 传递单击的“项目”对象。
现在我想在 item.html 中使用这个 item 对象 console.log(item) 给了我正确的对象。

我尝试在 item.html 中使用“currItem”来显示正确的数据。它不起作用。

不确定我在这里缺少什么？

4

2 回答 2

2

这实际上取决于您如何构建您的网站以及您希望应用程序如何流动。你有很多选择，第一个是最 Angular 的方法。

  1. 利用$route 服务和ngView。

  2. 将所有内容保持在一页上。您需要替换<a href="item.html">为<span ng-click="showDetails(item)">显示/隐藏一个单独的 div 的内容，该 div 包含可以绑定到的 item.html 的内容$scope.currentItem。 $scope.showDetails看起来像这样：$scope.showDetails = function (item) { $scope.currentItem = item }，并且 item.html 将位于类似：<div ng-show="currentItem != undefined">...</div>或类似的容器中。

  3. 通过更改<a href="item.html">为 向新页面发出请求<a href="item.html?itemId={{item.id}}">。这将需要向服务器发出一些额外的请求（不仅要加载 item.html，而且还要读取location.search数据，然后将数据（您在上一个请求中已有的数据）加载回新页面。

编辑

如果您要使用ngView，则必须修改ItemController以获取$route参数，然后您将使用该参数来检查项目 ID，如下所示：

app.controller('ItemController', function ($scope, $route) {
    // TODO load the item from some service or using ajax, here's the id:
    console.log($route.current.params.id);
});
于 2013-04-19T16:22:10.320 回答
0

Depending on what index.html is doing you could pass it as a parameter. e.g. 

index.html?title={{item.title}}&id={{item.id}}

and then use javascript in index.html to get the query string and parse it for display.

Not sure if you have a requirement to implemented this as a different page or could you use different view instead?

If it could be implemented as a separate view there are multiple options there:

于 2013-04-19T16:17:43.487 回答