Increasing the concealment of items

Question

Increasing the concealment of items

My query is about creating an expandable tree structure while iterating through an array in AngularJS. I managed to make it work, but the issue is that all nodes expand and collapse together.

Here's my HTML:

[...]
<div ng-repeat="item in items">
    <div class="item-title" ng-click="setState()">{{ item.title }}</div>
    <div class="item-container" show-me="isShown">
         {{ item.content }}
    </div>
</div>

And here is my JavaScript code:

[...]
// In the controller:

$scope.isshown = false;
$scope.setState = function() {
    $scope.isshown = !$scope.isshown;
};
[...]

.directive("showMe", function($animate) {
    return function (scope, element, attrs) {
        scope.$watch(attrs.showMe, function(newVal) {
            if(newVal) {
                $animate.addClass(element, 'show');             
            } else {
                $animate.removeClass(element,'show');
            }
        });
    };
});

Currently, this setup opens every item at once. I have been searching for a solution for 3 days now, and I am trying to avoid complex jQuery manipulations. Any suggestions?

javascript jquery angularjs

Answer 1

Answer №1

If you want to enhance your directive, consider implementing an isolate scope:

.directive("displayToggle", function($animate) {
    return {
        scope: {},
        link: function (scope, element, attrs) {
            scope.isDisplayed = false;
            scope.$watch('isDisplayed', function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'display');             
                } else {
                    $animate.removeClass(element,'display');
                }
            });
        }
    };
});

-- Solution to address query in the comments section --

To interact with the isolate scope externally, utilize the angular element. Retrieve the node using JavaScript methods like document.getElementById, document.getElementsByClassName or document.querySelector. Once you have the desired element, proceed as follows.

var node = document.getElementById('MyElement');
var el = angular.element(node);
var scope = el.scope();
scope.isDisplayed = false;

Alternatively, you can establish a listener within your directive to manage its value dynamically like so:

.directive("displayToggle", function($animate) {
    return {
        scope: {},
        link: function (scope, element, attrs) {
            scope.isDisplayed = false;

            element.bind('click', function(e) {
                e.preventDefault();
                scope.$apply(function() {
                    scope.isDisplayed = !scope.isDisplayed;
                });
            });

            scope.$watch('isDisplayed', function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'display');             
                } else {
                    $animate.removeClass(element,'display');
                }
            });
        }
    };
});

Answer 2

If you want to enhance your directive, consider implementing an isolate scope:

.directive("displayToggle", function($animate) {
    return {
        scope: {},
        link: function (scope, element, attrs) {
            scope.isDisplayed = false;
            scope.$watch('isDisplayed', function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'display');             
                } else {
                    $animate.removeClass(element,'display');
                }
            });
        }
    };
});

-- Solution to address query in the comments section --

To interact with the isolate scope externally, utilize the angular element. Retrieve the node using JavaScript methods like document.getElementById, document.getElementsByClassName or document.querySelector. Once you have the desired element, proceed as follows.

var node = document.getElementById('MyElement');
var el = angular.element(node);
var scope = el.scope();
scope.isDisplayed = false;

Alternatively, you can establish a listener within your directive to manage its value dynamically like so:

.directive("displayToggle", function($animate) {
    return {
        scope: {},
        link: function (scope, element, attrs) {
            scope.isDisplayed = false;

            element.bind('click', function(e) {
                e.preventDefault();
                scope.$apply(function() {
                    scope.isDisplayed = !scope.isDisplayed;
                });
            });

            scope.$watch('isDisplayed', function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'display');             
                } else {
                    $animate.removeClass(element,'display');
                }
            });
        }
    };
});

Answer 3

Answer №2

The directive's scope is shared among all instances, meaning every showMe directive will check the same isshown variable. To address this issue, you can update your code as follows:

<div ng-repeat="item in items">
    <div class="item-title" ng-click="setState(item)">{{ item.title }}</div>
    <div class="item-container" show-me="isShown(item)">
         {{ item.content }}
    </div>
</div>

Then, in your controller:

$scope.setState = function(item) {
    item.isshown = !item.isshown;
};
$scope.isShown = function(item) {
    return item.isshown;
};

In this approach, each item serves as both data source and a state holder for its "openness". The directive will trigger the isShown function in your controller to retrieve the item's state. Alternatively, you could maintain an array elsewhere to track shown items (removing them when hidden), with isShown checking if the item is in the array.

Answer 4

The directive's scope is shared among all instances, meaning every showMe directive will check the same isshown variable. To address this issue, you can update your code as follows:

<div ng-repeat="item in items">
    <div class="item-title" ng-click="setState(item)">{{ item.title }}</div>
    <div class="item-container" show-me="isShown(item)">
         {{ item.content }}
    </div>
</div>

Then, in your controller:

$scope.setState = function(item) {
    item.isshown = !item.isshown;
};
$scope.isShown = function(item) {
    return item.isshown;
};

In this approach, each item serves as both data source and a state holder for its "openness". The directive will trigger the isShown function in your controller to retrieve the item's state. Alternatively, you could maintain an array elsewhere to track shown items (removing them when hidden), with isShown checking if the item is in the array.

Answer 5

Answer №3

To achieve this functionality, simply utilize the following structure:

<div ng-repeat="item in items">
    <div class="item-title" ng-click="item.isShown = !item.isShown">{{ item.title }}</div>
    <div class="item-container" ng-show="item.isShown">
         {{ item.content }}
    </div>
</div>

No additional javaScript code is necessary.

Answer 6

To achieve this functionality, simply utilize the following structure:

<div ng-repeat="item in items">
    <div class="item-title" ng-click="item.isShown = !item.isShown">{{ item.title }}</div>
    <div class="item-container" ng-show="item.isShown">
         {{ item.content }}
    </div>
</div>

No additional javaScript code is necessary.

Increasing the concealment of items

Answer №1

Answer №2

Answer №3

Similar questions

Ways to retrieve row and column data from a datagrid

Testing Vue with Jest - Unable to test the window.scrollTo function

Filtering Tables with AngularJS

Issue encountered in IE9 and IE10 when loading the angular library results in the "SCRIPT5007: Object expected" error for Angular JS

Error: Trying to send FormData to ajax results in an Illegal Invocation TypeError being thrown

Place a div element immediately following a table row in the HTML document

Utilizing FullCalendar for showcasing comprehensive details

The values are not being displayed in the local storage checkbox

What is the best way to determine the quantity of elements received from an ajax request?

How to allow users to input strings on web pages with JavaScript

Efficiently transferring a style property to a child component as a computed property in Vue.js

Using ng-init to pass a JSON object

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

What is the best way to send a file object to a user for download?

What is the method for designating the specific pages on which the stripejs script should be loaded?

The Chrome extension functions properly when the page is refreshed or loaded, but it does not work with internal navigation

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Having trouble with a Reactjs Facebook login library - update the componentClicked function to be async

What could be causing React to render only the final two elements of my array?

Guide on invoking personalized server-side functions (such as object parsing) utilizing Typescript and Angular tools