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

Question

有一个使用ng-repeat显示的项目列表。 每个项目都与一个隐藏链接关联。 目的是如果单击项目的相应隐藏链接，则将其隐藏。

视图：

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

我该如何实现函数hideMe(item)这样一种方式，使其可以隐藏item div元素 ，类似以下内容，ng-if可以根据click事件确定何时隐藏-

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

Answer 1

您可以使用以下对象数组： $scope.products = [{name: 'hello', status: true}]

然后您可以隐藏它们，更改status属性：

<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

对于每个列表项，如果单击它，您都希望将其隐藏。 我们最好的方法是添加ng-hide指令。

在按钮上使用ng-click指令，我们可以将项目的hidden属性设置为true，这意味着它应该被隐藏。

<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');
};

这是一个小提琴

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

Answer 3

您可以使用$ index做到这一点。

这样的事情。

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

只需在单击时存储选定的值，然后使用隐藏即可使用ng-class隐藏该项目，并将其与选定的索引进行比较。