In Angular, the ng-click directive that assigns the value of tab to $index does not seem to be functioning properly

Question

In Angular, the ng-click directive that assigns the value of tab to $index does not seem to be functioning properly

I encountered an issue within my app

<li ng-repeat="name in tabs track by $index" ng-class="{selected: tab==$index}" ng-click="tab = $index">{{name}}</li>

After clicking on each item, the selected class remains enabled and switching to another item does not remove the class or update the tab. It only works when I make use of:

<li ng-repeat="name in tabs track by $index" ng-class="{selected: tab==$index}" ng-click="switchTab($index)">{{name}}</li>

scope.switchTab = function(index) {
  scope.tab = index;
};

I am wondering why ng-click="tab = $index" is not functioning as expected.

javascript angularjs

Answer 1

Answer №1

There is a mistake in your code, please correct it to:

scope.changeTab = function(selectedIndex) {
  scope.tab = selectedIndex;
};

You have used $index instead of selectedIndex, which is the parameter in your function.

Note: The reason why using a function works and direct assignment does not is that when you use ng-repeat, it creates a new scope. So when you do: tab = $index, you are actually creating a new variable within that new scope and not updating the one on the original $scope.

For more detailed information, refer to this question.

Answer 2

There is a mistake in your code, please correct it to:

scope.changeTab = function(selectedIndex) {
  scope.tab = selectedIndex;
};

You have used $index instead of selectedIndex, which is the parameter in your function.

Note: The reason why using a function works and direct assignment does not is that when you use ng-repeat, it creates a new scope. So when you do: tab = $index, you are actually creating a new variable within that new scope and not updating the one on the original $scope.

For more detailed information, refer to this question.

In Angular, the ng-click directive that assigns the value of tab to $index does not seem to be functioning properly

Answer №1

Similar questions

A new reference is created when Angular.copy is used

Tips for setting limitations on a date picker's minimum and maximum values on an iPhone using JavaScript

Enable CORS for AJAX requests with RESTful web services in Google Chrome

steps for including preset text in an input field within a form on WordPress

Launch an Android application directly from a web browser upon the webpage's loading

Can a form be submitted to two different pages based on the button name?

The $compile function fails to compile a directive template when using ngRepeat

Assistance with utilizing Regular Expressions to extract the className from a React/JSX component

Angular2 - Transforming SVG elements with dynamic styles using ng-style

The index type 'X' is not allowed for use in this scenario

What makes using setInterval with a self-invoking function a smarter choice?

Managing the rendering of a functional component using React/Redux

Learn how to retrieve the HTTP headers of a request using AngularJS

When a function is passed as an argument in Javascript code, the setTimeout function may behave in unique ways

Calculate the total value of a specific field within an array of objects

Is there a way to display all of them inline in Woocommerce?

Instant access to an interactive online platform

Expressing the power of multiple nested routers

Twilio's phone calls are programmed to end after just 2 minutes

Excellent Methods for Implementing a Double Click Functionality in JavaScript for Mouse