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

Does the AngularJS Controller disappear when the DOM element is "deleted"?

Is it possible to modify the CSS styling of the file_field?

Proceed with downloading the file only when a checkbox has been ticked off and the form has been

Is there a way to transmit a div using Node.js?

Update the value of a td element when a select option is changed in another td element within the same table row

Tips on serializing two arrays into JSON format and incorporating them in an AJAX request

Exploring different ways to navigate JSON data dynamically and efficiently modify it

Generate arrays with custom names by parsing JSON data

What will occur if I use an XMLHttpRequest to request a file that is currently being downloaded?

Converting a string into an array of JSON objects

"Execution of the console.log statement occurs following the completion of the request handling

Upload a user-sent image to a remote SFTP server for safekeeping

Endless loop caused by Angular UI-router's promise resolving

Styling for older versions of Internet Explorer (IE10 and earlier)

Troubleshooting the injection of filters in AngularJS Karma test setup

Loop through a variable class name in JavaScript

Building nested routes in a protected path using react-router version 6

The Node.js POST request is unexpectedly returning 'undefined'

Troubleshooting Checkbox Problems on Internet Explorer 6

What is the best way to show a nested div element within a v-for loop in Vue.js?