Leveraging the AngularJS model within a tabset framework

Question

Leveraging the AngularJS model within a tabset framework

I am working with a tabset that has two options and I am binding data from a JSON file using Angular. What I would like to do is log the name of the tab that I click on to the console. I thought about using a "model" for this, but I am not sure if that is the right approach.

Here is my tabset:

<tabset>
  <tab heading="tab1">
    <div class="panel-body">
        content
    </div>
  </tab>

   <tab heading="tab2">
    <div class="panel-body">
        content
    </div>
  </tab>
</tabset>

I have come across something like this before:

<div class="radio radio-text" ng-init="topTable.value='topCategory'">
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topCategory" ng-change="updateTotals(topTable.value)">TY Top 30 Categories</label>
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topSupplier" ng-change="updateTotals(topTable.value)">TY Top 10 Suppliers</label>
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topBrand" ng-change="updateTotals(topTable.value)">TY Top 10 Brands</label>
</div>

I would like to achieve something similar, where I can perform an action when a tab is clicked, just like with the radio buttons.

javascript angularjs

Answer 1

Answer №1

I'm uncertain about the exact location of the 'tabset' directive declaration. However, assuming you have the directive definition accessible:

app.directive('tab', function() {
   return {
       restrict : 'E',
       link : function(scope, element, attrs) {
           element.on('click', function() {
               console.log('This is tab: ', attrs.heading);
           }
       }

   }
});

and in your HTML:

<tabset>
  <tab heading="tab1">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>

By implementing this method, we are avoiding the use of ng-click. Since there is no update to any scope or controller object, there is no necessity to initiate a digest cycle using ng-click.

Answer 2

I'm uncertain about the exact location of the 'tabset' directive declaration. However, assuming you have the directive definition accessible:

app.directive('tab', function() {
   return {
       restrict : 'E',
       link : function(scope, element, attrs) {
           element.on('click', function() {
               console.log('This is tab: ', attrs.heading);
           }
       }

   }
});

and in your HTML:

<tabset>
  <tab heading="tab1">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>

By implementing this method, we are avoiding the use of ng-click. Since there is no update to any scope or controller object, there is no necessity to initiate a digest cycle using ng-click.

Answer 3

Answer №2

If you're looking to create a tabset, you can achieve it by using the following code snippet:

<tabset>
  <tab heading="tab1" ng-click="tabClicked('This is name 1')">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2" ng-click="tabClicked('This is name 2')">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>

Remember to include the following in your controller:

$scope.tabClicked = function(value) {
  console.log(value);
};

Answer 4

If you're looking to create a tabset, you can achieve it by using the following code snippet:

<tabset>
  <tab heading="tab1" ng-click="tabClicked('This is name 1')">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2" ng-click="tabClicked('This is name 2')">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>

Remember to include the following in your controller:

$scope.tabClicked = function(value) {
  console.log(value);
};

Leveraging the AngularJS model within a tabset framework

Answer №1

Answer №2

Similar questions

After using `setAttribute`, React is unable to produce any audio

What steps can be taken to customize this code in order to develop a dictation application?

Utilizing API calls within a loop using AngularJS

firebaseArray is returning a size of zero

What is the best way to include numerous optional parameters within a single route in Express?

Identify the key name in an array of objects and combine the corresponding values

Reaching out to a particular individual with a message

What are the steps involved in generating and implementing dynamic hierarchical JSON data structures?

"Reposition all elements contained within a div that have a specific class

Using Bootstrap, jQuery, and PHP to dynamically load input fields in a modal window

How can I load data from the server into CKEditor in React.js once the data is loaded?

Kartik's gridview in yii2 has a unique feature where the floating header in the thead and tbody are

What is the best way to remove multiple rows from a table using Angular.js?

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

Algorithm for File Naming

"Exploring the world of jest.doMock: A guide to mocking

How to resolve a TypeError saying "Object(...) is not a function"?

Interaction between index file and module instance

AngularJS: Transitioning from Expressions to Javascript (Coffeescript)