angularjs ng-repeat hide element with a click event

Question

There is a list of items which is displayed using ng-repeat. Each item is associated with a hide link. The intent is to hide an item if its corresponding hide link is clicked.

view:

<div ng-repeat="item in products">
 <div>{{ item }}</div>
 <a href"javascript:void(0)" ng-click="hideMe(item)">[delete]</label>
</div>

How could I implement the function hideMe(item) such a way that it could hide item div element, something like following, ng-if could identify when to hide based on the click event -

<div ng-if="...">{{ item }}</div>

Just an FYI, both answers below require that you take your original string value and wrap it in an object. If you cannot or unwilling to do so, then you will need to effect the changes on the products array itself by removing the item from the array. — jusopi
– jusopi, Commented Oct 1, 2015 at 17:19

Richard Hamilton · Accepted Answer · 2015-10-01 17:04:00Z

2

For every list-item, you want to hide it if it's clicked. The best way we can do this is by adding the ng-hide directive.

Using the ng-click directive on a button, we can set the hidden property of an item to true, meaning it should be hidden.

<ul>
  <li ng-repeat="fruit in fruits" ng-hide="fruit.hidden">
    <p>{{fruit.name}}</p>
    <button ng-click="hideMe(fruit)">hide li</button>
  </li>
</ul>

$scope.hideMe = function (fruit) {
    fruit.hidden=true;
    alert('hide this li');
};

Here is a fiddle

http://jsfiddle.net/5yh8bxay/1/

answered Oct 1, 2015 at 17:04

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

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

Comments

michelem · Accepted Answer · 2015-10-01 17:05:45Z

2

You could use an array of objects like this: $scope.products = [{name: 'hello', status: true}]

And then you can hide them changing the status property:

<div ng-repeat="item in products">
   <div ng-show="item.status">
       {{ item.name }} <a href"javascript:void(0)" ng-click="item.status = false">[delete]</label>
   </div>
</div>

JSFiddle

edited Oct 1, 2015 at 17:05

answered Oct 1, 2015 at 16:58

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Comments

cagica · Accepted Answer · 2015-10-01 17:49:16Z

1

You can use $index to do that.

Something like this.

  <div ng-repeat="item in products">
        <div ng-hide="selected.index === $index">{{ item }}</div>
        <a href"javascript:void(0)" ng-click="selected.index = $index">[delete]</label>
  </div>

Just store the selected value when clicked and use-hide you can use ng-class to hide the item, comparing them to the selected index.

answered Oct 1, 2015 at 17:49

cagica

6794 silver badges23 bronze badges

Collectives™ on Stack Overflow

angularjs ng-repeat hide element with a click event

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related