Apply the "ng-class" directive only if there is an <a> element located after the specified element

Question

Apply the "ng-class" directive only if there is an <a> element located after the specified element

My issue involves a list of items categorized by labels, with a search filter applied. The problem arises when the labels appear in the search results even though the lists themselves are empty. I need to hide the relevant label if there are no items present. One way to achieve this is by checking if an anchor tag exists after the label with the class .item, and if it doesn't, then adding the .hidden class to the label.

I attempted the following Angular code, but being new to Angular, it didn't work as expected:

<div class="label" ng-class="next(a).length <= 0 ? 'hidden'">
  My Label
</div>

This is how a section appears when items are present in the list:

<div class="list search-list">
  <div class="label" ng-class="next(a).length <= 0 ? 'hidden'">
     My Label
  </div>
  <a class="item> .. </a>
  <!-- More a tags here -->

  <div class="label" ng-class="next(a).length <= 0 ? 'hidden'">
     My Label 2
  </div>
  <a class="item> .. </a>
  <!-- More a tags here -->
</div>

Upon inspecting, I confirmed that irrelevant anchor tags are indeed removed from the search results.

UPDATE:

I added a false case to the ng-class, but unfortunately, it didn't solve the issue.

<div class="label" ng-class="next(a).length <= 0 ? 'hidden' : 'shown'">
     My Label
  </div>

UPDATE2: Full structure

<ion-view view-title="Search">
  <ion-content ng-controller="SearchCtrl">

    <div class="list search-bar">
      <label class="item item-input">
        <i class="icon ion-ios-search-strong placeholder-icon"></i>
        <input type="text" placeholder="What are you looking for?" ng-model="searchFilter">
      </label>
    </div>

    <div class="list search-list">

      <!-- Group 1 -->
      <div class="item item-divider" ng-class="angular.next('a').length <= 0 ? 'hidden' : 'shown'">
        My Title
      </div>
      <a
        class="item item-avatar"
        href="#/app/{{item.link}}"
        ng-repeat="item in items | filter:searchFilter">
        <img src="img/item.png">
        <h2>{{item.title}}</h2>
        <p>Description</p>
      </a>

      <!-- Group 2 -->
      <div class="item item-divider" ng-class="angular.next('a').length <= 0 ? 'hidden' : 'shown'">
        My Title 2
      </div>
      <a
        class="item item-avatar"
        href="#/app/{{item2.link}}"
        ng-repeat="item2 in items2 | filter:searchFilter">
        <img src="img/item2.png">
        <h2>{{item.title}}</h2>
        <p>Description 2</p>
      </a>

    </div>


  </ion-content>
</ion-view>

javascript angularjs

Answer 1

Answer №1

If you prefer to stick with the original method of checking for the presence of an <a/> element after your <div>, you can create a custom directive. Below is an example that verifies this condition:


.directive('conditionalDisplay', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      if (element.next('a.item').length == 0)
        element.css('display', 'none');
    }
  }
});

Here's how it can be utilized:


<div class="list search-list">
      <div conditional-display class="label">
        My Label (Not Displayed, because there is no next a element)
      </div>
      <!--<a class="item"> .. </a>-->
      <!-- More a tags here -->

      <div conditional-display class="label">
        My Label 2 (Displayed)
      </div>
      <a class="item"></a>
      <!-- More a tags here -->
</div>

You can view a functional plunker at: http://plnkr.co/edit/ytCVxuBnbZAbX0faiQ4m?p=preview

Note: It's essential to have jQuery included for the next() selector to properly function, as JQLite does not support next() with selectors.

Personally, I find @pgreen2 's approach more aligned with the Angular way of handling tasks.

Answer 2

If you prefer to stick with the original method of checking for the presence of an <a/> element after your <div>, you can create a custom directive. Below is an example that verifies this condition:


.directive('conditionalDisplay', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      if (element.next('a.item').length == 0)
        element.css('display', 'none');
    }
  }
});

Here's how it can be utilized:


<div class="list search-list">
      <div conditional-display class="label">
        My Label (Not Displayed, because there is no next a element)
      </div>
      <!--<a class="item"> .. </a>-->
      <!-- More a tags here -->

      <div conditional-display class="label">
        My Label 2 (Displayed)
      </div>
      <a class="item"></a>
      <!-- More a tags here -->
</div>

You can view a functional plunker at: http://plnkr.co/edit/ytCVxuBnbZAbX0faiQ4m?p=preview

Note: It's essential to have jQuery included for the next() selector to properly function, as JQLite does not support next() with selectors.

Personally, I find @pgreen2 's approach more aligned with the Angular way of handling tasks.

Answer 3

Answer №2

According to the documentation for the ng-init directive in AngularJS, you have the option to save the filter results and then access them as follows:

<!-- Group 1 -->
<div ng-init="filteredItems = (items | filter:searchFilter)" ng-if="filteredItems">
  <div class="item item-divider">
    My Title
  </div>
  <a class="item item-avatar" href="#/app/{{item.link}}" ng-repeat="item in filteredItems">
    <img src="img/item.png">
    <h2>{{item.title}}</h2>
    <p>Description</p>
  </a>
</div>

I encompassed the entire group within a div that utilizes ng-init to create a variable named filteredItems, which is later utilized in two other instances. Firstly, it determines whether to display the entire div using ng-if. This should address your initial query. Additionally, I employ filteredItems in the ng-repeat for the anchor tags.

Answer 4

According to the documentation for the ng-init directive in AngularJS, you have the option to save the filter results and then access them as follows:

<!-- Group 1 -->
<div ng-init="filteredItems = (items | filter:searchFilter)" ng-if="filteredItems">
  <div class="item item-divider">
    My Title
  </div>
  <a class="item item-avatar" href="#/app/{{item.link}}" ng-repeat="item in filteredItems">
    <img src="img/item.png">
    <h2>{{item.title}}</h2>
    <p>Description</p>
  </a>
</div>

I encompassed the entire group within a div that utilizes ng-init to create a variable named filteredItems, which is later utilized in two other instances. Firstly, it determines whether to display the entire div using ng-if. This should address your initial query. Additionally, I employ filteredItems in the ng-repeat for the anchor tags.

Apply the "ng-class" directive only if there is an <a> element located after the specified element

Answer №1

Answer №2

Similar questions

Discovering the current state's name with AngularJS

Concealing the text input cursor (caret) from peeking through overlaid elements on Internet Explorer

Creating and deploying a basic Angular2 application in cordova

Error: X does not conform to function definition

Utilize Require.js to Load Dropzone.js Library

Issue with Component not displaying properly upon refreshing

How can users create on-click buttons to activate zoom in and zoom out features in a Plotly chart?

Utilizing npm/buffer package within a TypeScript module

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Offspring of div should have equal height without the top and bottom padding

Exploring the World of Node.js Event Handling in JavaScript

Run a series of promises in an array one after the other without relying on async and await

What is the best way to retrieve a value from an asynchronous method in Node.js that is using promises and also calling another asynchronous method?

What are the differences between Angular's dynamic templating using compile and template function?

Is it possible to trigger a function dynamically upon checking a checkbox?

Show the ajax response on a separate page

Mastering Angular Protractor for End-to-End Testing

What is the proper method to set up jQuery in scripts loaded via AJAX? I keep receiving the error message: 'Uncaught TypeError: Object #<Object> has no method'

How to position an image on top of each printed page using HTML/CSS (SCSS)

Components in Angular are not compatible with Promises and Services