带有click事件的angularjs ng-repeat隐藏元素

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>

Answer 1

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

Answer 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/

Answer 3

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.