具有LOCAL数据的主细节模式

时间:2016-05-03 13:01:37

标签: angularjs

我对Angular JS编码结构比较陌生,我已经成功地使用JSON中的$ hhtp.get方法提取数据,但现在我正在尝试使用本地数据。我正在尝试创建一个显示项目详细信息(价格,规格,品牌等)的主详细信息模式,但我试图将一个控制器中的一系列产品传递到"详细信息"控制器,但我没有成功。所有路由工作都很完美,只是详细信息页面(product.html)没有显示特定项目的详细信息。我不确定如何使用服务。

感谢任何帮助。谢谢!以下是我的代码段。

Controllers.Js



.controller('homeCtrl', function ($scope) {
	$scope.products= [
	{
	title: 'iPhone 6',
	cover:'img/iphone6.png',
	description: 'Apple Device of the New Age',
    price:459.99,
    id: 1
	},
	{
	    title: 'iPhone 6 Plus',
	    cover: 'img/iPhone-6-Plus.png',
	    description: 'Apple Device of New Age 2',
        price:499.99,
        id: 2
	},
    {
        title: 'iPad Air',
        cover: 'img/iPadAir.png',
        description: 'Apple iPad Air 2',
        price:299.99,
        id:3
    },
    {
        title: 'Dell Inspiron 15.6"',
        cover: 'img/dellLaptop.png',
        description: 'This is a laptop made by Dell',
        price:499.99,
        id:4
    },
    {
        title: 'Galaxy S6 Edge',
        cover: 'img/galaxy-s6-edge.png',
        description: 'Samsung Galaxy S6 Edge',
        price:399.99,
        id:5
    }
	];

})

.controller('detailsCtrl', function ($scope, $stateParams, detailsService, Products) {
    
    $scope.detail = Products;
    
    
});

<ion-view view-title="Details" id="page5">
    <ion-content padding="true" class="has-header">
        <div class="list card"  ng-controller="detailsCtrl">

            <div class="item item-avatar">
                <img ng-src="http://3.bp.blogspot.com/-BeQW1K0oGvM/UOqF8XFqKsI/AAAAAAAAH48/24ZEet_mKY8/s1600/google-chrome-black-centre.png">
                <h2>{{detail.title}}</h2>
            </div>

            <div class="item item-image">
                <img ng-src="{{detail.cover}}">
            </div>
            <div class="item item-divider">
                Product Specs
            </div>
            <div class="item item-text-wrap">
                <ul>
                <li>&bull;4.7-inch (diagonal) LED-backlit widescreen Multi-Touch display with IPS technology</li>
                   <li>&bull;New 8-megapixel iSight camera with 1.5 pixels</li>
                    <li>&bull;A8 chip with 64-bit architecture. M8 motion coprocessor</li>
                   <li> &bull;1080p HD video recording (30 fps or 60 fps)</li>
                   <li>&bull;Unlocked cell phones are compatible with GSM carriers like H2O Wireless.</li>
                    </ul>
            </div>
            <button class="button button-icon-left button-assertive button-block" ng-click="addtoCart()">
                <i class="icon ion-ios-cart"></i>
                Add to Cart
            </button>

        </div>
    </ion-content>
</ion-view>
&#13;
&#13;
&#13;

0 个答案:

没有答案