Question

我有项目列表，并尝试根据它的ID查看单个页面中的每个项目。我有以下应用程序结构。

项目JSON文件

[{
    "id": "1-item",
    "name" : "1 item",
    "desc" : "..."
},
{
    "id": "2-item",
    "name" : "2 item",
    "desc" : "..."
}]

商品列表

<div ng-controller="StoreController as store">

<div class="col-sm-6 col-md-4" ng-repeat="product in store.products ng-hide="product.soldOut">

    <div class="caption">
        <h3>{{product.name}}</h3>

        <p>{{product.desc | limitTo: 100}}</p>

        <!-- ITEM ID LINK -->
        <a href="#/products/{{product.id}}" role="button">View</a>

    </div>
</div>

单项视图

<h1>{{product.name}}</h1>
<p>{{product.desc}}</p>

ngRoute

(function(){
var app = angular.module('store-routes', ['ngRoute']);

app.config(['$routeProvider',
    function($routeProvider) {

        $routeProvider
            .when('/products/:productId', {
                templateUrl: 'views/products-details.html',
                controller : 'StoreController',
                controllerAs: 'store'
            })
            .otherwise({
                redirectTo:  '/home'
            });
    }]); })();

app.js

(function(){
var app = angular.module('store', ['store-routes']);

app.controller('StoreController', ['$http', '$scope', function($http, $scope){
    var store = this;
    store.products = [];

    $http.get('data/products.json').success(function(data) {
        store.products = data;
    });

}]); })();

这里的问题是在单个视图中渲染。演示链接有点不同，它有一个带有ng-repeat的单页，所以我正在寻找正确的方法来避免它。提前谢谢。

Angularjs单页和渲染/查看数据

0 个答案: