html #angular.js：使用Gallery Controller
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html #angular.js：使用Gallery Controller相关的知识，希望对你有一定的参考价值。
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
app.controller('TabController', function(){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
});
app.controller('GalleryController', function(){
this.current = 0;
this.setCurrent = function(newGallery){
this.current = newGallery || 0;
};
});
var gems = [
{
name: 'Azurite',
description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
shine: 8,
price: 110.50,
rarity: 7,
color: '#CCC',
faces: 14,
images: [
"images/gem-02.gif",
"images/gem-05.gif",
"images/gem-09.gif"
],
reviews: [{
stars: 5,
body: "I love this gem!",
author: "joe@example.org",
createdOn: 1397490980837
}, {
stars: 1,
body: "This gem sucks.",
author: "tim@example.org",
createdOn: 1397490980837
}]
},
{
name: 'Bloodstone',
description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
shine: 9,
price: 22.90,
rarity: 6,
color: '#EEE',
faces: 12,
images: [
"images/gem-01.gif",
"images/gem-03.gif",
"images/gem-04.gif",
],
reviews: [{
stars: 3,
body: "I think this gem was just OK, could honestly use more shine, IMO.",
author: "JimmyDean@example.org",
createdOn: 1397490980837
}, {
stars: 4,
body: "Any gem with 12 faces is for me!",
author: "gemsRock@example.org",
createdOn: 1397490980837
}]
},
{
name: 'Zircon',
description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
shine: 70,
price: 1100,
rarity: 2,
color: '#000',
faces: 6,
images: [
"images/gem-06.gif",
"images/gem-07.gif",
"images/gem-09.gif"
],
reviews: [{
stars: 1,
body: "This gem is WAY too expensive for its rarity value.",
author: "turtleguyy@example.org",
createdOn: 1397490980837
}, {
stars: 1,
body: "BBW: High Shine != High Quality.",
author: "LouisW407@example.org",
createdOn: 1397490980837
}, {
stars: 1,
body: "Don't waste your rubles!",
author: "nat@example.org",
createdOn: 1397490980837
}]
}
];
})();
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body class="list-group" ng-controller="StoreController as store">
<header>
<h1 class="text-center">Flatlander Crafted Gems</h1>
<h2 class="text-center">– an Angular store –</h2>
</header>
<div class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
</h3>
<!-- Image Gallery -->
<div class='gallery' ng-controller="GalleryController as gallery" ng-show="product.images.length">
<img ng-src="http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/{{product.images[gallery.current]}}" />
<ul class="list-inline thumbs">
<li class="thumbnail" ng-repeat="image in product.images">
<img ng-src="http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/{{image}}" />
</li>
</ul>
</div>
<section class="tab" ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{ active: tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Description</a></li>
<li ng-class="{ active: tab.isSet(2) }">
<a href ng-click="tab.setTab(2)">Specs</a></li>
<li ng-class="{ active: tab.isSet(3) }">
<a href ng-click="tab.setTab(3)">Reviews</a></li>
</ul>
<div ng-show="tab.isSet(1)">
<h4>Description</h4>
<blockquote>{{product.description}}</blockquote>
</div>
<div ng-show="tab.isSet(2)">
<h4>Specs</h4>
<blockquote>Shine: {{product.shine}}</blockquote>
</div>
<div ng-show="tab.isSet(3)">
<h4>Reviews</h4>
</div>
</section>
</div>
</body>
</html>
以上是关于html #angular.js：使用Gallery Controller的主要内容，如果未能解决你的问题，请参考以下文章