【AngularJS學習筆記】ng-click與ng-if實現按鈕切換功能

效果

yLlR2yf 【AngularJS學習筆記】ng-click與ng-if實現按鈕切換功能

實現

先寫出三個按鈕,並使用ng-click綁定事件,當使用者點擊button就會觸發ng-click的事件。

<input type="button" value="1" ng-click="setCurrent(1)">
<input type="button" value="2" ng-click="setCurrent(2)">
<input type="button" value="3" ng-click="setCurrent(3)">

給定三個區域,每個區域加上ng-if屬性,並設置current變數:

<div ng-if="current == 1">
                <p>在文藝復興時期,意大利雕刻家米開朗基羅,用了多年時間完成了舉世聞名的大理石雕刻,</p>
                <p>名為「大衛」,現在存放於佛羅倫斯美術學院。
                </p>
                <p>當朋友問他雕鑿出栩栩如生的大衛像的秘訣,他只是輕描淡寫地說:</p>
                <p>「大衛本來就在這塊大理石之內,我只是將不屬於大衛的石塊鑿掉罷了!」
                </p>
            </div>
            <div ng-if="current == 2">
                <p>著名心理學家威廉•詹姆士說:</p>
                <p>「我們快樂是因為我們微笑,而並非因為快樂而笑。」</p>
                <p>意思是行動往往能夠影響心態,所以選擇積極行動最為重要。</p>
            </div>
            <div ng-if="current == 3">
                <p>「享受你的生活,不要與別人比較。」 ---康道塞</p>
                <p>有一個人在河邊釣魚,他釣了非常多的魚,</p>
                <p>但每釣上一條魚就拿尺量一量。只要比尺大的魚,他都丟回河裡。</p>
                <p>其他釣客不解地問:「別人都希望釣大魚,</p>
                <p>為什麼只有你將大魚都丟回河裡呢?」</p>
                <p>這人輕鬆地回答:「因為我家的鍋子只有尺這麼長,太大的魚裝不下。」</p>
                <p>默想:不讓無窮的慾念攫取己心,「夠用就好」也是不錯的生活態度。</p>
                <p>當人們在吃到飽的自助餐廳,毫無忌憚的吞食,那可真是一個可怕的景象。</p>
                <p>取自己夠用的,不必貪求,這也是一個重要的修練。</p>
            </div>

由以上程式碼可知,我們需要一個setCurrent(param) 的function以及 current 變數。

我們先將current變數預設為1 (當使用者進入該頁面默認顯示第一個按鈕的內容),並加入setCurrent方法,傳入的值為param,根據不同按鈕傳入的值不同來切換變數current的值:

<script>
        var app = angular.module('app', []);
        app.controller("siteCtrl", function($scope) {
            $scope.current = 1;
            $scope.setCurrent = function(param) {
                $scope.current = param;
            }
        });
    </script>

:別忘記綁定ng-app和ng-controller。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論