angular mulitiple ng-hide using same variable

Question

I'm stuck with something, that should be quite ordinary. I'm about to write a factory to solve this problem, but was thinking, that there must be a clever way out of this.

I have a ng-repeat in my directive templateUrl:

<div ng-repeat="item in items">
   <p ng-click="toggle()" ng-hide="display">{{item.$value}}</p>
   <input ng-model="item.$value" ng-show="display">
   <button ng-show="display" ng-click="changeText(item)">finish</button>
</div>

My toggle function looks like this:

$scope.toggle = function (){
      $scope.display = !$scope.display;
    };

That means, when I click on one <p> element, all input-fields are being displayed. Since they all are using the same variable. I can't wrap my head around making a proper angular solution to this problem, so that only the one within this item is being toggled. Does such a solution even exist?

Zee · Accepted Answer · 2015-06-12 11:03:54Z

5

One simple way to make it is to use item.display instead of display and pass item in toggle(). Something like this:

<div ng-repeat="item in items">
    <p ng-click="toggle(item)" ng-hide="item.display">{{item.$value}}</p>
    <input ng-model="item.$value" ng-show="item.display">
    <button ng-show="item.display" ng-click="changeText(item)">finish</button>
</div>

JS:

$scope.toggle = function (item) {
    item.display = !item.display;
};

answered Jun 12, 2015 at 11:03

Zee

8,4805 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ziga Petek · Accepted Answer · 2015-06-12 13:04:01Z

2

Try this:

<div ng-repeat="item in items">
     <p ng-click="toggle(item)" ng-hide="item.display">{{item.$value}}</p>
     <input ng-model="item.$value" ng-show="item.display">
     <button ng-show="item.display" ng-click="changeText(item)">finish</button>
</div>

$scope.toggle = function (item){
  item.display = item.display || false;
  item.display = !item.display;
};

If you keep the "display" flag inside the item, you can toggle it for each one individually. If "item.display" is not defined, it will be treated as "false".

At least that's how I usually do it, there may be better solutions though.

edited Jun 12, 2015 at 13:04

answered Jun 12, 2015 at 10:59

Ziga Petek

4,1285 gold badges35 silver badges44 bronze badges

1 Comment

martin Over a year ago

Again, great Idea with the item parameter. Thank you very much for your speedy reply.

Collectives™ on Stack Overflow

angular mulitiple ng-hide using same variable

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related