Geek Answers Handbook

Ng-click function affecting all ng-repeat elements

A number of apple, orange, banana links are created using ng-repeat . Clicking on these links will cause the fruit color to appear under the link.

Problem: However, clicking any link displays colors for all fruits. How can we limit the click event to display only the color of the fetus that is clicked?

Jsfiddle: http://jsfiddle.net/hut13fox/

HTML

 <div ng-controller="FruitCtrl"> <div ng-repeat="f in fruits"> <a href="#" ng-click="toggleShow()">{{ f.title }}</a> <div ng-show="show"> {{ f.color }} </div> </div> </div>

Js

 var myApp = angular.module('myApp', []); FruitCtrl = function($scope) { $scope.fruits = [ { title: 'apple', color: 'red' }, { title: 'orange', color: 'orange' }, { title: 'banana', color: 'yellow' } ]; $scope.show = false $scope.toggleShow = toggleShow function toggleShow() { console.log('toggle') $scope.show = !$scope.show } } console.log('Hello')
+6
source share
3 answers

You must set the visibility in each element.

 <div ng-controller="FruitCtrl"> <div ng-repeat='fruit in fruits'> <a href="#" ng-click='toggleShow(fruit)'>{{ fruit.title }}</a> <div ng-show='fruit.show'> {{ fruit.color }} </div> </div> </div>

And format JS as

 function toggleShow(fruit) { fruit.show = fruit.show }

Your object will look something like this:

  $scope.fruits = [ { title: 'apple', color: 'red', show : true }, { title: 'orange', color: 'orange', show : true }, { title: 'banana', color: 'yellow', show : true } ];

This way you can manage the default settings

Also, you don't need the toggle method, you can do it inline in the html tag:

 <a href="#" ng-click='fruit.show = !fruit.show'>{{ fruit.title }}</a>
+3
source

I would do this, which does not require changing your model:

 <div ng-controller="FruitCtrl"> <div ng-repeat='f in fruits'> <a href="#" ng-click='show=!show'>{{ f.title }}</a> <div ng-show='show'> {{ f.color }} </div> </div> </div>

The reason for this is because ngRepeat will create a child region with each iteration. Using the expression show=!show , it ensures that the expression evaluates to the current current child iteration region, and each child region gets its own "show" scope property.

+3
source

Change your code like this:

 <div ng-controller="FruitCtrl"> <div ng-repeat="f in fruits"> <a href="#" ng-click="toggleShow(f)">{{ f.title }}</a> <div ng-show="f.show"> {{ f.color }} </div> </div> </div>

And your js on

 function toggleShow(f) { console.log('toggle') f.show = !f.show }

Basically, you previously used the shared show scope for all the items that caused the problem. And now we use each fruit item separately to switch each item using f.show , supporting the show key in each of your fruit items.

See working code here:

 var myApp = angular.module('myApp', []); FruitCtrl = function($scope) { $scope.fruits = [{ title: 'apple', color: 'red' }, { title: 'orange', color: 'orange' }, { title: 'banana', color: 'yellow' }]; $scope.show = false $scope.toggleShow = toggleShow function toggleShow(f) { console.log('toggle') f.show = !f.show } } myApp.controller('FruitCtrl', FruitCtrl); console.log('Hello') 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="FruitCtrl"> <div ng-repeat='f in fruits'> <a href="#" ng-click='toggleShow(f)'>{{ f.title }}</a> <div ng-show='f.show'> {{ f.color }} </div> </div> </div> </div>
+1
source

More articles:


All Articles