Looking for the nearest element in AngularJS

Question

Looking for the nearest element in AngularJS

I am attempting to create a slide toggle effect on the closest .contactDetails element when clicking on a. However, my current code is not producing the desired result.

<ul>
    <li ng-repeat="detail in details">
        <div>
            <a show-contact>{{something}}</a>
            <div class="contactDetails">
                <ul>
                    <li ng-repeat="another ng-repeat">
                        <b>{{something}}</b>
                    </li>
                </ul>
            </div>
            <br>
        </div>
    </li>
</ul>

app.directive("showContact", function () {
        return {
            restrict: "A",
            link: function (scope, element) {
                element.click(function () {
                    element.find(".contactDetails").slideToggle();
                });
            }
        };
    });

It seems that AngularJS might be having difficulty locating the closest .contactDetails, resulting in the failure of the slideToggle() function.

I have also attempted using

element.closest(".contactDetails")

, but this did not yield the expected outcome either. Any assistance would be greatly appreciated. Thank you.

javascript angularjs

Answer 1

Answer №1

Because the anchor tag is not within the div, using find won't work in this case. The closest method searches up the DOM, not down. Here's how I would approach it (just focusing on the link portion of the directive):

function(scope, element) {
    element.on("click", function() {
        element.next(".contactDetails").slideToggle();
    });
}

Check out the jsFiddle example

Answer 2

Because the anchor tag is not within the div, using find won't work in this case. The closest method searches up the DOM, not down. Here's how I would approach it (just focusing on the link portion of the directive):

function(scope, element) {
    element.on("click", function() {
        element.next(".contactDetails").slideToggle();
    });
}

Check out the jsFiddle example

Answer 3

Answer №2

Behold the solution you requested --> Click to Run Snippet.

1) First, I target the .contactDetails element

var contactDetails = element.next();

2) Next, I execute the method

.toggleClass('hide')

on the .contactDetails element to toggle its visibility.

3) The ".hide" class sets display property to none;

display: none;

4) Now, an event listener is added to the element

 element.on('click', function () {
     //Code goes here               
 });

var myapp = angular.module('myapp', []);
myapp.directive("showContact", function () {
        return {
            restrict: "A",
            link: function (scope, element) {
                element.on('click', function () {
                  var contactDetails = element.next();
                    contactDetails.toggleClass('hide');                       
                });
            }
        }
});
                        
    
myapp.controller('MainCtrl', ['$scope', function($scope) {
  this.something = 'This is something';
  this.arr = ['mike', 'john', 'brian', 'joe'];  
}]);

body {
font-family: Arial, Tahoma;  
}
.hide {
  display:none;
}

a{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="MainCtrl as ctrl">
    <ul>
    <li>
        <div>
            <a show-contact>Toggle class (CLICK ME)</a>
            <div class="contactDetails">
                <ul>
                    <li ng-repeat="name in ctrl.arr">
                        <b>{{name}}</b>
                    </li>
                </ul>
            </div>
            <br>
        </div>
    </li>
</ul>;


    
  </div>
</div>

ere

Answer 4

Behold the solution you requested --> Click to Run Snippet.

1) First, I target the .contactDetails element

var contactDetails = element.next();

2) Next, I execute the method

.toggleClass('hide')

on the .contactDetails element to toggle its visibility.

3) The ".hide" class sets display property to none;

display: none;

4) Now, an event listener is added to the element

 element.on('click', function () {
     //Code goes here               
 });

var myapp = angular.module('myapp', []);
myapp.directive("showContact", function () {
        return {
            restrict: "A",
            link: function (scope, element) {
                element.on('click', function () {
                  var contactDetails = element.next();
                    contactDetails.toggleClass('hide');                       
                });
            }
        }
});
                        
    
myapp.controller('MainCtrl', ['$scope', function($scope) {
  this.something = 'This is something';
  this.arr = ['mike', 'john', 'brian', 'joe'];  
}]);

body {
font-family: Arial, Tahoma;  
}
.hide {
  display:none;
}

a{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="MainCtrl as ctrl">
    <ul>
    <li>
        <div>
            <a show-contact>Toggle class (CLICK ME)</a>
            <div class="contactDetails">
                <ul>
                    <li ng-repeat="name in ctrl.arr">
                        <b>{{name}}</b>
                    </li>
                </ul>
            </div>
            <br>
        </div>
    </li>
</ul>;


    
  </div>
</div>

ere

Looking for the nearest element in AngularJS

Answer №1

Answer №2

Similar questions

Transmitting an Ajax request via property path

Having trouble removing an element from an array while using the splice method within a jQuery $.each loop

My HTML form submission to the node.js file is stuck in an endless loading loop

Sorting with conditions in aggregations

Custom calendar control vanishes on postback in ASP

How can one effectively leverage Rails JS templates in their projects?

Connected Date Selector

Encountering issues with saving information to MongoDB

A guide on getting the `Message` return from `CommandInteraction.reply()` in the discord API

Implementing a Class on Page Refresh in Next JS

Sending an associative array to Javascript via Ajax

Code needed to efficiently include a d3 module through webpack

Form submission is not possible while the login form is active

What is the best approach for incorporating multi-threading into my JavaScript code?

Guide on how to exit an async function

Transforming a JSONP request to automatically parse a text response into JSON

What could be causing my redux-observable to not be triggered as expected?

Creating a Border Length Animation Effect for Button Hover in Material-UI

sent a data entry through ajax and performed validation using jquery

jQuery load() issue