javascript - 带有点击事件的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 可以识别何时隐藏基于点击事件 -

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

Answer 1

对于每个列表项，您希望在单击时隐藏它。最好的方法是添加 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');
};

这是一个 fiddle

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