Creating interactive click and model expressions in AngularJS

Question

Creating interactive click and model expressions in AngularJS

Within my ng-repeat loop, I am trying to implement the following toggle functionality:

<a href='#' ng-model="collapsed{{$index}}" ng-click="collapsed{{$index}}=!collapsed{{$index}}">{{item.type}}</a>
  <div ng-show="collapsed{{$index}}">
    {{item.type}}
  </div>

However, I am encountering errors as ng-model and ng-click do not seem to work well with {{ }} syntax. I have also attempted using [$index] without success.

Does anyone have suggestions on the correct approach to achieve this functionality in a way that each iteration can maintain its own collapsed state?

javascript angularjs

Answer 1

Answer №1

To control the collapse state of each item in your list, consider using an array of booleans in your controller.

// All items start off collapsed
$scope.collapses = [true, true, true, ...];

Implement the toggling functionality with:

<a ng-click="toggle($index)">{{item.type}}</a>
<div ng-hide="collapses[$index]">{{item.type}}</div>

The toggle() function:

$scope.toggle = function(index) { collapses[index] = !collapses[index]; };

Answer 2

To control the collapse state of each item in your list, consider using an array of booleans in your controller.

// All items start off collapsed
$scope.collapses = [true, true, true, ...];

Implement the toggling functionality with:

<a ng-click="toggle($index)">{{item.type}}</a>
<div ng-hide="collapses[$index]">{{item.type}}</div>

The toggle() function:

$scope.toggle = function(index) { collapses[index] = !collapses[index]; };

Answer 3

Answer №2

To enhance organization, consider utilizing a controller to manage the collapsed state:

Controller:

app.controller('collapseCtrl', ['$scope', function($scope){
    $scope.collapsed = true;
    $scope.toggle = function(){
        $scope.collapsed = !$scope.collapsed;
    };
}]);

HTML:

<div ng-controller="collapseCtrl">
    <a href='#' ng-click="toggle()">{{item.type}}</a>
    <div ng-show="collapsed">
      {{item.type}}
    </div>
</div>

Answer 4

To enhance organization, consider utilizing a controller to manage the collapsed state:

Controller:

app.controller('collapseCtrl', ['$scope', function($scope){
    $scope.collapsed = true;
    $scope.toggle = function(){
        $scope.collapsed = !$scope.collapsed;
    };
}]);

HTML:

<div ng-controller="collapseCtrl">
    <a href='#' ng-click="toggle()">{{item.type}}</a>
    <div ng-show="collapsed">
      {{item.type}}
    </div>
</div>

Creating interactive click and model expressions in AngularJS

Answer №1

Answer №2

Similar questions

Having trouble importing a variable from a precompiled library in TypeScript JavaScript

What could be causing the malfunction in one of the functions within my JavaScript code?

How can multiple functions be grouped and exported in a separate file in Node.js?

Is it no longer possible to create custom linked Context Menus in Tabulator 5?

A method to eliminate click events for an element

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

How to retrieve scope variable within the <script> element

NodeJS Express throwing error as HTML on Angular frontend

WebStorm: Exploring HTTP server choices for both local development and cross-platform compatibility

Upon successful authorization, the Node Express server will pass the access token to the React client app via OAuth in the callback

JavaScript - Issue with retrieving object properties accurately

Conceal the Navigation Bar Upon the Pop Up's Appearance

Issue 404: Trouble sending form data from React to Express

Moment-Timezone defaults to the locale settings after the global Moment locale has been established

Protractor quickly launches and closes the Chrome browser without completing the entire scenario

"Cookie Magic: Unleashing the Power of Ajax and

In Firefox, the Ajax Call is failing to initiate a response automatically

Using jQuery AJAX to add to a JSON response with the value "d:null"

What is the best way to set up a server-sent-events broadcast feature in totaljs?

Mastering the use of gl Scissor is essential for effectively implementing popups in your