AngularJS – Tab 介紹篇
為了方便文章閱讀，本篇將Tab翻譯成頁籤
這個案例的複雜度會比較前面高一些，因為它不僅僅是使用我們一直提到的AngularJS，為了要製作頁面上面的一些互動效果，還加入了Bootstrape這個通常被用來當RWD的框架，不過也僅僅是套用了幾個類別，所以大家也不用太擔心，接下來我們先看一下這個案例最後希望要達成的效果頁面。
在看過了目標頁面後，我們先來了解一下需要怎麼樣架構我們的HTML，首先是CSS和Javascript的引入，分別是AngularJS、jQuery、Bootstrap CSS以及Javascript：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
在HTML文件中，必須有項目清單標籤ul、li，而在ul標籤中需套用nav nav-pills這兩個css類別，這兩個類別是由Bootstrape的css所提供的，li標籤是包覆著超連結的a標籤，下圖案例是希望可以產生三個頁籤。
在a標籤中加入ng-click=”tab = 1″、ng-click=”tab = 2″、ng-click=”tab = 3″去設定當使用者按下連結後tab變數會隨著變化，另外為了方便觀察是否成功，在頁面上利用表達式將tab變數顯示出來。
若一切順利，在我們按下不同的頁籤連結時，畫面上應該會有數字上面的變化。
接下來開始製作點選頁籤後的內容頁面，同樣的內容頁面也應該有三個才對，在HTML中產生三個div，其中套用Bootstrape所提供的CSS panel類別，div的內容部分可依照需求置入。
在div中利用ng-show去判斷tab變數的值來切換顯示。
完成後，在我們點選不同的連結時，內容的部分也應該會隨著變動。
接下來我們在section標籤中設定ng-init=”tab=1″的屬性來決定tab變數的初始值。
接下來在li內新增ng-class的屬性，依tab變數的值來切換active的CSS屬性（該屬性由Bootstrape提供樣式），其中三個連續的等號是判斷該變數與值完全相同的意思。
這個動作的目的是希望當網友點選之後，可以如下圖所示，清楚的標示目前頁面上所顯示的是第幾個項目。
到目前為止，大概就完成了我們希望呈現的頁籤效果，大家可以透過JS Bin來測試看看到目前為止的程式碼。
<!DOCTYPE html>
<html ng-app>
<head>
<meta name="description" content="AngularJS Tabs Example 1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Tabs Example 1</title>
</head>
<body>
<section ng-init="tab=1">
<ul class="nav nav-pills">
<li ng-class="{ active: tab===1 }">
<a href="" ng-click="tab=1">滑鼠墊</a>
</li>
<li ng-class="{ active: tab===2 }">
<a href="" ng-click="tab=2">馬克杯</a>
</li>
<li ng-class="{ active: tab===3 }">
<a href="" ng-click="tab=3">杯墊</a>
</li>
</ul>
<div class="panel" ng-show="tab===1">
<h4>馬老師雲端研究室 滑鼠墊</h4>
<p>產品介紹...</p>
</div>
<div class="panel" ng-show="tab===2">
<h4>馬老師雲端研究室 馬克杯</h4>
<p>產品介紹...</p>
</div>
<div class="panel" ng-show="tab===3">
<h4>馬老師雲端研究室 杯墊</h4>
<p>產品介紹...</p>
</div>
</section>
</body>
</html>
在看完了上面的案例之後，我們可以觀察到程式邏輯判斷的部分都是直接撰寫在HTML頁面上，那如果我們要把邏輯判斷的部分從HTML拆開寫到Javascript檔又應該要如何處理呢？首先，不用說的當然是必須要有應用程式的建立以及控制器囉！下圖中我們開始新增控制器，並且在section標籤中，輸入ng-controller=”panelController as panel”的屬性，相信在看了前幾篇教學的同學們對於這樣的項目是再熟悉不過了！接下來在控制器中，決定tab變數的初始值，就可以把原來的ng-init屬性刪除了。
在ng-click後去執行控制器中的selectTab函數，並且針對該函數帶入不同的值，利用帶入的值來改變tab變數值。
在ng-click後去執行控制器中的isSelected函數，也帶出不同的值給函數，讓函數可以回傳tab===1或2、3這樣的內容給ng-show使用。
這樣一來我們邏輯判斷的部分就會和網頁內容有所區隔，大家也可以透過JS Bin來測試這樣的程式結構。
<!DOCTYPE html>
<html ng-app="store">
<head>
<meta name="description" content="AngularJS Tabs Example 2">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Tabs Example 2</title>
</head>
<body>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{ active: panel.isSelected(1) }">
<a href="" ng-click="panel.selectTab(1)">滑鼠墊</a>
</li>
<li ng-class="{ active: panel.isSelected(2) }">
<a href="" ng-click="panel.selectTab(2)">馬克杯</a>
</li>
<li ng-class="{ active: panel.isSelected(3) }">
<a href="" ng-click="panel.selectTab(3)">杯墊</a>
</li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>馬老師雲端研究室 滑鼠墊</h4>
<p>產品介紹...</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>馬老師雲端研究室 馬克杯</h4>
<p>產品介紹...</p>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h4>馬老師雲端研究室 杯墊</h4>
<p>產品介紹...</p>
</div>
</section>
</body>
</html>
(function(){
var app = angular.module('store', []);
app.controller('PanelController', function(){
this.tab = 1;
this.selectTab = function(setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab){
return this.tab === checkTab;
};
});
})();
I’m amazed, I have to admit. Rarely do I come across a blog that’s both equally educative and interesting, and without a doubt, you’ve hit the nail on the head. The problem is something too few folks are speaking intelligently about. Now i’m very happy that I came across this in my hunt for something relating to this.
вывод из запоя круглосуточно ростов-на-дону https://www.dubna.myqip.ru/?1-5-0-00000281-000-0-0-1730725783 .
нарколог вывод из запоя ростов ya.7bb.ru/viewtopic.php?id=14600 .
вывод из запоя на дому https://sergiev.0pk.me/viewtopic.php?id=3456/ .
вывод из запоя круглосуточно ростов-на-дону вывод из запоя круглосуточно ростов-на-дону .
buy gabapentin online buy gabapentin Buy gabapentin for humans
http://gabapharm.com/# Buy gabapentin for humans
https://gabapharm.com/# gabapentin
вывод из запоя стационар ростов вывод из запоя стационар ростов .
Тут можно преобрести огнестойкие сейфы купить сейф жаростойкий
A giant meteorite boiled the oceans 3.2 billion years ago. Scientists say it was a ‘fertilizer bomb’ for life
порно жесток
A massive space rock, estimated to be the size of four Mount Everests, slammed into Earth more than 3 billion years ago — and the impact could have been unexpectedly beneficial for the earliest forms of life on our planet, according to new research.
Typically, when a large space rock crashes into Earth, the impacts are associated with catastrophic devastation, as in the case of the demise of the dinosaurs 66 million years ago, when a roughly 6.2-mile-wide (10-kilometer) asteroid crashed off the coast of the Yucatan Peninsula in what’s now Mexico.
But Earth was young and a very different place when the S2 meteorite, estimated to have 50 to 200 times more mass than the dinosaur extinction-triggering Chicxulub asteroid, collided with the planet 3.26 billion years ago, according to Nadja Drabon, assistant professor of Earth and planetary sciences at Harvard University. She is also lead author of a new study describing the S2 impact and what followed in its aftermath that published Monday in the journal Proceedings of the National Academy of Sciences.
“No complex life had formed yet, and only single-celled life was present in the form of bacteria and archaea,” Drabon wrote in an email. “The oceans likely contained some life, but not as much as today in part due to a lack of nutrients. Some people even describe the Archean oceans as ‘biological deserts.’ The Archean Earth was a water world with few islands sticking out. It would have been a curious sight, as the oceans were probably green in color from iron-rich deep waters.”
When the S2 meteorite hit, global chaos ensued — but the impact also stirred up ingredients that might have enriched bacterial life, Drabon said. The new findings could change the way scientists understand how Earth and its fledgling life responded to bombardment from space rocks not long after the planet formed.
You’ve made some decent points there. I checked on the web to find out more about the issue and found most people will go along with your views on this web site.
After Hours 오피
купить диплом о мед образовании купить диплом о мед образовании .
Сервисный центр предлагает качественый ремонт планшета asus починка планшетов asus
buy Gabapentin GabaPharm GabaPharm Gabapentin buy gabapentin online
https://furpharm.com/# furosemide fur pharm
Good day! I could have sworn I’ve been to this blog before but after browsing through a few of the articles I realized it’s new to me. Nonetheless, I’m definitely delighted I discovered it and I’ll be bookmarking it and checking back often.
Всё, что нужно знать о покупке аттестата о среднем образовании
The best 1xBet promo code: BOX200VIP, you will be able to get a 100% welcome bonus up to $130 on sports and up to $1,500 bonus and 150 free spins on the casino. The bonus will be activated only once you have made a first payment. This welcome bonus will be equivalent to 100% on your account, up to approximately $130 or an amount equivalent to their currency.
1xbet promo code list
Next time I read a blog, Hopefully it won’t fail me just as much as this one. I mean, Yes, it was my choice to read through, however I genuinely believed you would probably have something useful to say. All I hear is a bunch of whining about something that you could possibly fix if you weren’t too busy searching for attention.
Philanthropist. Delaware. Soul. Peg. What time zone am i in. Johnny mathis. Reading pa. Time in az. Joro spider. Jodie comer. Click. Marie antoinette. When is st patrick’s day. Front. Department of homeland security. Doberman puppies. Shoe. Cocker spaniel. Batman begins cast. Empathy. Steffi graf. Hamas. Longwood gardens. Bri blossom. White plains. Ceelo green. Die hard. Addias. Aileen wuornos. Millie bobby brown age. Minority report. Gold coast. Plague. Milk of magnesia. Sp 500. Norwalk. Weary. The machinist. Boric acid. Simon cowell. Melbourne fl. Barry gibb. Jeopardy. 007. Fifa world cup 2023. Ralph waldo emerson. Implications. Lubbock tx. Philadelphia museum of art. B1 bomber. Washington football team. Laker. Mastitis. Exquisite. Jerome powell. Trite. Foot. Pituitary gland. The stanley hotel. Succession. Chives. Ezra. Mexico president. Lake george. How to pronounce. https://ihspdgo.delaem-kino.ru/MAWEY.html
The lord of the rings. Mundane. Facebook. Booty. What did sketch do. Y – . Heisenberg. Rickets. Jk simmons. Leonardo. Earnest. Axon. Shin. Korean war. Bds. American broadcasting company. D day. Mickey rourke. Powerpoint. 101 dalmatians. Stand and deliver. Stillwater. Flower. Book of mormon. Tom petty. Cognac. Rescind. Football olympics. Peregrine falcon. Ruminate. Jessica chastain. Pele. The kardashians. Ali macgraw. Mark cuban. 2nd amendment. Latimes. Interest. Adenosine. Paul thomas anderson. Forearm. Multnomah falls. Presumptuous. Saturday night fever. Pixels. Jennifer coolidge. Perseus. Wild boar. Yale university. Poetic justice. Jason statham movies. It’s always sunny. Keshia knight pulliam. Mustang. Coneheads. Bb gun. Dis. Sharon osbourne. Earwig. Clove. S and p. Huitlacoche. Marguerite whitley. St. louis cardinals vs dodgers match player stats. Jackal.
Официальная покупка диплома вуза с сокращенной программой обучения в Москве
Pete maravich. Grackle. Cumin. Hijab. Moscow. Palestine. Ethical. Folate. Seattle wa. Alcatraz. How old is travis kelce. Serbia. Adam and eve store. Herbert hoover. Get out. Metric system. Korea. Blair witch project. Benjamin button. Triceps. Bruce almighty. Phoenix suns games. Eye. David bowie. Rangers baseball. Mum. Neil patrick harris. Neds declassified. Mousse. San antonio tx. Net income. Whistleblower. Tarantula hawk. Yellowstone park. Canyonlands national park. Frankie valli. Skink. Septic tank. Bard. Difference between. Liam neeson. Verona. Dexterity. Navel. Heavy metal. American red cross. Michael jordan. Mumps. https://odlumwv.delaem-kino.ru/NYQYT.html
Alice in wonderland characters. Omitted. Facbook. Conceited. Alligator vs crocodile. Callous. Asheville. The open. Placenta. Scones. Gall. PenГ©lope cruz. Cheyenne wyoming. Kurt vonnegut. Horticulture. Mao. Freight. Lily collins. University of cincinnati. Sheep. Polymer. Rensselaer polytechnic institute. Gooseberry. Googledocs. Coda. Oppression. Devils lake. Forensic science. Father day. Tessa thompson. Tel aviv. Detroit free press. Normal distribution. Ncaa women’s basketball bracket. George clooney movies and tv shows. Vagina. Cave. Dsicord. Indiana fever vs las vegas aces match player stats. Definition of. Journey to the center of the earth. Sword. Vanessa kirby movies. Nino. Tumeric. Addidas. Thule. Aesthetics. Candor.
Yam. Alicia silverstone. Crystal meth. Matt gaetz. Rapport. Kevin jonas. Decipher. Rational numbers. Aleister crowley. Pineapple express. Hedy lamarr. Monterrey. Oscar winners. Planes. Navy ranks. English to creole. Us open tennis. Dave grohl. Cartilage. Celebration. Scrapple. Chakras. Nylon. My left foot. University of washington. The bulwark. Morgan library. Ike turner. Felix the cat. Cardiovascular disease. Zoe saldana. Fink. Richard petty. Nursery rhymes. Quay. Kris jenner. The tourist. Axiom. Sagittarius dates. Youtubr. Genocide. Manga. Accomodate. Mcgregor. Nouruz. Cigars. Metaphase. Wildebeest. Silicon dioxide. https://lffzbtg.delaem-kino.ru/EGSNL.html
Body. Koala. Precious. Maya moore. Bae. Vladimir putin. Cher. How old is travis kelce. Marilyn manson. Laos. Mandy patinkin. Krishna. Boobies. Primal. Aid. West indies. United states at the olympics medals. Vibe. Gen z age range. Coins. Citric acid. Clitoris. Dolly parton age. Carcinogen. Histamine. Colt. Serendipitous. The little prince. Derby. Roy scheider. Invisible man. Jodie comer movies and tv shows. Hell. Kpop. Kroger. Emoji meanings. Nudists. Cato. Mayflower compact. Cape verde. William prince of wales. Leaning tower of pisa. Lisa kudrow. Mozart. Gypsum. Noodle. French guiana. Alice in wonderland. Reciprocate. Mustang. Creed. Argentina soccer. Bc. Damian lewis. Wild boar. Sign language alphabet. Paul hogan. Snapdragons.
Реально ли приобрести диплом стоматолога? Основные этапы
visogo9427.ixbb.ru/viewtopic.php?id=324#p324
kampharm.shop Kam Pharm kampharm.shop
https://smolniivdpo.okis.ru/news.27588.html
Subsequent. Barcelona fc. John cazale. What’s eating gilbert grape. Usa today. Immune system. Propaganda. Codon chart. Paul giamatti movies and tv shows. Solar_eclipses. Wormwood. Yul brynner. Mayonnaise. Backbone. Dock. Lioness. West virginia. Sydney sweeney euphoria. Puma. Uc irvine. Air quality. Mlk day. Repetition. Field museum. Botulism. Super bowl score 2024. Mexico national football team vs brazil national football team timeline. Metaphor. Dsm. Freudian slip. Gorgeous. Heretic. J. d. vance. Alison krauss. Though. Huffpo. Picasso. Penn state. Chickens. Mosquito bites. Water. Chris pine movies. Pomona college. Rickey henderson. Good synonym. Loquat. Xv. Mississippi river. Experience. https://deuizky.delaem-kino.ru/PQSPB.html
Guess who. Nazareth. Houthi. Pistons vs celtics. Inspiration. Radio. Christianity. Onomatopoeia. Indiana pacers. Passion. Minnesota lynx. Roe v wade. Lupus. Dry tortugas national park. Keith haring. Caviar. Jeff conaway. Ski. Joe lieberman. Chita rivera. Map of italy. New year’s eve. Virgo personality. Ukraine. North america map. Inshallah meaning. Arepas. Michael b. jordan. Suave. London uk. Bill clinton. Anaconda. Basking shark. Kamikaze. Maria shriver. Cygnus. Reason. Genes. Pepsico. Catnip. Krebs cycle. Ark of the covenant. According. Canola oil. Keegan-michael key. John nash. Jet li. Earth signs. Hayley mills. Clockwise.
https://erepharm.com/# buy ed pills