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>

次に、ルート用に個別のファイルを作成しました。

home.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>

item.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 console.log(item) 内でこのアイテム オブジェクトを使用したいのですが、正しいオブジェクトが得られます。

正しいデータを表示するために、item.html 内で「currItem」を使用しようとしました。うまくいきません。

ここで何が足りないかわからない？

4

2 に答える 2

0

index.html が何をしているかに応じて、それをパラメーターとして渡すことができます。例えば

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

次に、index.html で javascript を使用してクエリ文字列を取得し、表示用に解析します。

これを別のページとして実装する必要があるかどうか、または代わりに別のビューを使用できるかどうかわかりませんか?

別のビューとして実装できる場合は、複数のオプションがあります。

  • 共有サービスを使用してデータを別のコントローラーに渡し、それを新しいコントローラーのモデルに結び付けることができます。サービスの詳細については、次のリンクを参照してください。http://docs.angularjs.org/guide/dev_guide.services.creating_services

  • $scope 変数を使用して、選択したアイテムの新しいモデルを作成し、既存のコントローラーを使用できます。

于 2013-04-19T16:17:43.487 に答える