تبديل تبويبات Angular UI بشكل برمجي

لتعيين علامة تبويب نشطة برمجيًا في Angular UI (AngularJS)، يمكنك استخدام خاصية متغير نموذجية في وحدة التحكم الخاصة بك. من خلال هذه الخاصية، يمكنك التحكم في علامة التبويب التي تكون نشطة حاليًا عن طريق تعيين قيمة محددة للخاصية المرتبطة بالتبويب النشط.

لتحقيق هذا الهدف، يمكنك القيام بالخطوات التالية:

1. أولاً، يجب عليك إنشاء متغير في وحدة التحكم الخاصة بك يُمثل العلامة التبويب النشطة.
2. ثم، يمكنك استخدام هذا المتغير لتحديد أي تبويب يجب أن يكون نشطًا بناءً على الشرط الذي تحدده.
3. وأخيرًا، يمكنك استخدام دالة لتغيير قيمة المتغير الخاص بالتبويب النشط بناءً على متطلبات التطبيق.

اليك كيفية تنفيذ ذلك بشكل تفصيلي:

htmlCopy code
<uib-tabset type="pills" active="activeTab">
    <uib-tab heading="Tab 1" select="changeTab(1)">Tab 1 contentuib-tab>
    <uib-tab heading="Tab 2" select="changeTab(2)">Tab 2 contentuib-tab>
uib-tabset>

javascriptCopy code
angular.module('myApp', ['ui.bootstrap'])
    .controller('TabsController', ['$scope', function($scope) {
        // تعريف متغير لتحديد التبويب النشط
        $scope.activeTab = 1;

        // دالة لتغيير التبويب النشط
        $scope.changeTab = function(tabNumber) {
            $scope.activeTab = tabNumber;
        };
    }]);

في هذا المثال، قمنا بإنشاء متغير يسمى activeTab في وحدة التحكم، وهذا المتغير يحدد التبويب النشط حاليًا. بعد ذلك، قمنا بربط هذا المتغير بخاصية active في عنصر uib-tabset، مما يعني أن التبويب ذو الرقم المحدد في activeTab سيكون نشطًا.

أيضًا، قمنا بإضافة دالة changeTab التي تأخذ رقم التبويب كمعامل، وهذه الدالة تعيد تعيين قيمة activeTab إلى الرقم الجديد للتبويب النشط.

بهذه الطريقة، يمكنك الآن تغيير التبويب النشط بنجاح برمجيًا باستخدام Angular UI في تطبيقك.

بالإضافة إلى الطريقة المذكورة أعلاه، يمكنك أيضًا استخدام ميزة Angular UI Router لتحقيق نفس الغرض بشكل متقدم. باستخدام UI Router، يمكنك تحديد الحالة النشطة لعنصر التبويب بناءً على عنوان URL.

لتحقيق هذا، يمكنك اتباع الخطوات التالية:

1. تأكد من تضمين Angular UI Router في تطبيق Angular الخاص بك.
2. قم بتكوين حالات مختلفة لكل تبويب في ملف تكوين التطبيق.
3. استخدم ui-sref لتحديد الروابط التي تفتح كل تبويب.
4. ضع عنصر في القالب الخاص بك لعرض المحتوى المرتبط بكل تبويب.

اليك كيفية تنفيذ ذلك:

javascriptCopy code
angular.module('myApp', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        // تحديد حالات التبويب
        $stateProvider
            .state('tab1', {
                url: '/tab1',
                templateUrl: 'tab1.html'
            })
            .state('tab2', {
                url: '/tab2',
                templateUrl: 'tab2.html'
            });

        // تحديد العنصر الافتراضي لعنصر التبويب
        $urlRouterProvider.otherwise('/tab1');
    }]);

htmlCopy code
<uib-tabset type="pills">
    <uib-tab ui-sref="tab1" heading="Tab 1">Tab 1 contentuib-tab>
    <uib-tab ui-sref="tab2" heading="Tab 2">Tab 2 contentuib-tab>
uib-tabset>

<div ui-view>div>

في هذا المثال، قمنا بتكوين حالتين (tab1 و tab2)، كل منهما يحتوي على عنوان URL محدد. ثم، استخدمنا ui-sref لتحديد الروابط التي تفتح كل تبويب، واستخدمنا لعرض المحتوى المرتبط بكل تبويب.

بهذه الطريقة، يمكنك الآن تحديد التبويب النشط بناءً على العنوان URL المطابق، مما يوفر مزيدًا من المرونة والتحكم في تبويبات تطبيقك.