Is there a way to include an attribute in a class prior to a response and then eliminate it afterward?

Question

Is there a way to include an attribute in a class prior to a response and then eliminate it afterward?

Hey everyone, I have a situation in my HTML where I need to add a specific attribute to a class before receiving a response from an API, and then remove it after the response.

Let me show you the HTML snippet:

<div class="artist-job-search-foo artist-filter" ng-click="$ctrl.changeTypeOfFilter({params: $index + 1, paramsTwo : 'true'});$ctrl.selectedTab = $index" role="button">Audition</div>

And here is how my API call looks like:

 $scope.callFunction = function(){
    // Add attribute to class artist-filter
    // Make API call
    // Remove attribute from class artist-filter
}

jquery css angularjs

Answer 1

Answer №1

If you're looking to explore a vast collection of resources, the Angular library available on the angularjs website is where you should head.

To address your specific scenario, utilizing ng-class will allow you to dynamically add or remove classes.

Check out this example:

var app = angular.module('app', []);

app.controller('ctrl', function($scope, $http) {
  $scope.myClass = "artist-filter";

  $http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
    $scope.items = response.data
  });

  $scope.callFunction = function(item) {
    item.active = true;
  }

});

.deactive {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">


  <ul>
    <li ng-repeat="item in items" ng-class="{'deactive': !item.active}" ng-click="callFunction(item)">
      {{item.name}}
    </li>
  </ul>

</div>

Answer 2

If you're looking to explore a vast collection of resources, the Angular library available on the angularjs website is where you should head.

To address your specific scenario, utilizing ng-class will allow you to dynamically add or remove classes.

Check out this example:

var app = angular.module('app', []);

app.controller('ctrl', function($scope, $http) {
  $scope.myClass = "artist-filter";

  $http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
    $scope.items = response.data
  });

  $scope.callFunction = function(item) {
    item.active = true;
  }

});

.deactive {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">


  <ul>
    <li ng-repeat="item in items" ng-class="{'deactive': !item.active}" ng-click="callFunction(item)">
      {{item.name}}
    </li>
  </ul>

</div>

Is there a way to include an attribute in a class prior to a response and then eliminate it afterward?

Answer №1

Similar questions

`AngularJS streamlining techniques within Factories/Services`

The two <p> elements are being pushed to the right column, which is not their intended display

Updating the bootstrap grid for printing on smaller screens by changing from col-xs to col-sm

Error parsing data in the $.ajaxSetup() function of JQuery

The headers in your request, specifically the token field, are not permitted by the Access-Control-Allow-Headers directive in the preflight

A space has been included before the CSS tag in the document for docx4j/Js

Tips for loading and updating data simultaneously in VUEJS from a single input

The unusual behavior of a page refresh in jQuery when replacing content

Using CSS to overlay a fixed element with a specific z-index

After repeated attempts to initialize and destroy, Froala encounters issues when loading a textarea via Ajax

For each iteration, the ng-repeat will select the first value from the list

Is the CSS hover feature not functioning properly because of the pseudo-elements?

HTML/CSS: What could be causing the iframe to not scroll properly?

Guide to obtaining scope within a nested directive

Exploring the Art of Structuring Json Data Using jquery

Utilize a Javascript function to retrieve a string and set it as the ID

Display jade template with parameters that are bound using angular during rendering

What is the best way to reference a div link from a different PHP file?

Getting the value of dynamically generated buttons when they are clicked in PHP - a simple guide

The HTML form label offers a choice between two alternatives