Use ng-click to enable specific actions only on the element in which it is placed

Question

Use ng-click to enable specific actions only on the element in which it is placed

Using ng-repeat, I have created a series of elements...

<div class="form-block" ng-repeat="form in formblock | filter:dateFilter">

    <div ng-click="showResults()" ng-if="repeat == true" class="drop">{{ form.form_name }} <span class="caret"></span></div>

    <div ng-show="results" class="formURL">{{ form.url }}</div>
    <div ng-show="results" class="formCount">{{ form.count }}</div>
    <div ng-show="results" class="formSubmit">{{ form.submit }}</div>

</div>

The ng-click="showResults()" function is responsible for toggling the display of other elements. However, I am facing an issue where I want this click event to only affect elements within the same container, not all elements.

In essence, I wish for the click event to exclusively impact elements within the container where the function is called. How can I achieve this?

This is how showResults function looks like in my controller...

$scope.showResults = function(){
  return ($scope.results ? $scope.results=false : $scope.results=true)
}

javascript angularjs

Answer 1

Answer №1

ng-repeat offers a unique variable (unless already defined): $index.

With this, you can keep an object $index => toggleState instead of a single boolean value in your AngularJS code:

$scope.hiddenItems = {};

$scope.toggleItem = function (idx) {
    $scope.hiddenItems[idx] = !$scope.hiddenItems[idx];
}

And in your HTML markup:

<div ng-repeat="item in items">
  <div class="item" ng-hide="hiddenItems[$index]">
  <h1>
  {{item}}
  </h1>
  Everything you need to know about {{item}}!
  <br />
  </div>
  <a ng-click="toggleItem($index)">Toggle {{item}}</a>
</div>

Check it out live on jsfiddle.net!

Answer 2

ng-repeat offers a unique variable (unless already defined): $index.

With this, you can keep an object $index => toggleState instead of a single boolean value in your AngularJS code:

$scope.hiddenItems = {};

$scope.toggleItem = function (idx) {
    $scope.hiddenItems[idx] = !$scope.hiddenItems[idx];
}

And in your HTML markup:

<div ng-repeat="item in items">
  <div class="item" ng-hide="hiddenItems[$index]">
  <h1>
  {{item}}
  </h1>
  Everything you need to know about {{item}}!
  <br />
  </div>
  <a ng-click="toggleItem($index)">Toggle {{item}}</a>
</div>

Check it out live on jsfiddle.net!

Answer 3

Answer №2

In order to display specific results based on index values, you can utilize the $index variable within your AngularJS code:

<div ng-click="showResults($index)" ng-if="repeat == true" class="drop">{{ form.form_name }} <span class="caret"></span></div>
<div ng-show="results[$index]" class="formURL">{{ form.url }}</div>
<div ng-show="results[$index]" class="formCount">{{ form.count }}</div>
<div ng-show="results[$index]" class="formSubmit">{{ form.submit }}</div>

Here is an example of how you can define the function for handling these results:

$scope.showResults = function(index){
  return ($scope.results[index] ? $scope.results[index]=false : $scope.results[index]=true)
}

Answer 4

In order to display specific results based on index values, you can utilize the $index variable within your AngularJS code:

<div ng-click="showResults($index)" ng-if="repeat == true" class="drop">{{ form.form_name }} <span class="caret"></span></div>
<div ng-show="results[$index]" class="formURL">{{ form.url }}</div>
<div ng-show="results[$index]" class="formCount">{{ form.count }}</div>
<div ng-show="results[$index]" class="formSubmit">{{ form.submit }}</div>

Here is an example of how you can define the function for handling these results:

$scope.showResults = function(index){
  return ($scope.results[index] ? $scope.results[index]=false : $scope.results[index]=true)
}

Use ng-click to enable specific actions only on the element in which it is placed

Answer №1

Answer №2

Similar questions

Choose the appropriate data type for the class variable (for example, fArr = Uint32Array)

Implementing a timed delay before assigning a class in the state

Tips for refreshing the current page with passing a parameter in the URL?

Experimenting with mocha and Nightmare.js, utilizing traditional syntax and without the use of ES6 features

Issue: The content of the text does not align with the HTML generated by the server

Unable to update the information within a DIV using Python Django, as well as the webpage following a jQuery action

Display the keys of a nested array in Vue.js when the structure is unknown

Navigate within a div using arrow keys to reposition another div

Scrolling seamlessly within a container that is fixed in position

Is there a way to stop my <pre> code from being displayed on the page?

Uploading a Node.js Package to GitHub Packages - Issue ENEEDAUTH

Using the ng-class directive, you can dynamically apply a specific class based on the value

yo projectname Angular Command

How can I show the initial three digits and last three digits when using ngFor loop in Angular?

Deactivate a setInterval function within a Vue.js component

Customized settings saved in local storage using JavaScript

implementing lazy loading in AngularJS uib-tab

The AngularJs filter seems to be malfunctioning

Having trouble retrieving data from the table with AJAX and CodeIgniter

403 Malicious Path Middleware Error in Express.js