สร้าง Tab ในด้วย Angular เเต่จะให้มัน defult เลือก Tab เเรกค้างไว้ทำยังไงค่ะ

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

สร้าง Tab ในด้วย Angular เเต่จะให้มัน defult เลือก Tab เเรกค้างไว้ทำยังไงค่ะ

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

รูปภาพ
ต้องการทำเเบบในภาพ


ตอนนี้พอมันโหลดครั้งเเรกมันไม่เลือกไว้


จากโค้ด

โค้ด: เลือกทั้งหมด

  <tab ng-repeat="tab in tabs" name="{{tab.name}}" id="{{tab.id}}" selected="{{ $index == 1}}">
                {{tab.name}}
            </tab>
รูปภาพ


$index มันส่งค่ามาถูกนะเเต่ว่า มันจะแสดงผลตอนคลิกเท่านั้น

เเต่ถ้าเขียน

โค้ด: เลือกทั้งหมด

    <tab ng-repeat="tab in tabs" name="{{tab.name}}" id="{{tab.id}}" selected>
                {{tab.name}}
            </tab>
ผลที่ได้มันก้อเลือกทุก tab เลย
รูปภาพ

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!doctype html>
<html ng-app="mainModule">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <!--<cript type="text/javascript" src="https://raw.githubusercontent.com/BinaryMuse/ngInfiniteScroll/1.0.0/build/ng-infinite-scroll.js"></script>-->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        .tab-control {
            list-style: none;
            padding: 0;
            margin: 5px;
        }

        .tab-control li {
            display: inline;
            padding: 5px 20px;
            border: 1px solid grey;
            border-bottom: 0;
            border-radius: 5;
            cursor: pointer;
        }

        .tab-control li.selected {
            background-color: lightblue;
        }

        .tab-content header {
            display : none;
        }

        .tab-content {
            border: 1px solid black;
            width: 100%;
            height: 100%;
            display: none;
        }

        .tab-content.selected {
            display: block;
        }
    </style>
    <body>
<!--    <tab-control id="MainTabControl" class="red">
        <tab name="FirstTab" id="Tab1">
            Tab 1 stuff
        </tab>
        <tab name="SecondTab" id="Tab2" selected>
            Tab 2 stuff
        </tab>
        <tab name="ThirdTab" id="Tab3">
            <strong>Tab 3</strong>
        </tab>
    </tab-control>-->

    <div ng-controller="DynamicTabController">
        <tab-control>
            <tab ng-repeat="tab in tabs" name="{{tab.name}}" id="{{tab.id}}" selected="{{ $index == 1}}">
                {{tab.name}}
            </tab>
        </tab-control>
    </div>
    <script type="text/ng-template" id="tab2ContentTemplate">
        Tab2
    </script>
    <script type="text/ng-template" id="tabControlTemplate">
        <ul id="{{id}}" class="{{klass}} tab-control">
        <li ng-repeat="tab in tabs" ng-class="{ selected: tab.selected }" class="tab" ng-click="selectTab(tab)">{{tab.name}}</li>
        </ul>

        <section ng-transclude>
        </section>
    </script>

    <script type="text/ng-template" id="tabTemplate">
        <article id="{{id}}" ng-class="{ selected: selected}" class="{{klass}} tab-content">
        <header>
        <h1>{{ name }}</h1>
        </header>
        <section ng-transclude>
        </section>
        </article>
    </script>
</body>
<script>
    var mainModule = angular.module("mainModule", []);

    mainModule.directive('tabControl', function () {
        return {
            restrict: 'E',
            templateUrl: 'tabControlTemplate',
            scope: {
                id: '@id',
                klass: '@class',
            },
            transclude: true,
            controller: ['$scope', function ($scope) {
                    $scope.tabs = []

                    this.addTab = function (tab) {
                        $scope.tabs.push(tab);
                    }

                    $scope.selectTab = function (tab) {
                        for (var i = 0; i < $scope.tabs.length; i++) {
                            if (tab.name != $scope.tabs[i].name) {
                                $scope.tabs[i].selected = false;
                            } else {
                                $scope.tabs[i].selected = true;
                            }
                        }
                    }
                }]
        };
    });

    mainModule.directive('tab', function () {
        return {
            restrict: 'E',
            templateUrl: 'tabTemplate',
            transclude: true,
            replace: true,
            scope: {
                id: '@id',
                name: '@name',
            },
            require: '^tabControl',
            link: function (scope, element, attrs, ctrl) {
                scope.selected = attrs.selected == "" || attrs.selected == true
                ctrl.addTab(scope);
            }
        };
    });

    mainModule.controller("DynamicTabController", ['$scope', function ($scope) {
            $scope.tabs = [
                {name: 'Tab1', id: 'Tab1'},
                {name: 'Tab2', id: 'Tab2'},
                {name: 'Tab3', id: 'Tab3'},
                {name: 'Tab4', id: 'Tab4'},
                {name: 'Tab5', id: 'Tab5'},
                {name: 'Tab6', id: 'Tab6'},
                {name: 'Tab7', id: 'Tab7'}
            ]
        }]);
</script>
</html>
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สร้าง Tab ในด้วย Angular เเต่จะให้มัน defult เลือก Tab เเรกค้างไว้ทำยังไงค่ะ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ลองดู

โค้ด: เลือกทั้งหมด

 $scope.activeTabIndex  = index tab ที่จะให้ default 
ลองดูตัวอย่าง ของเค้า เพิ่ม tags มาเรื่อยๆ
https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 76