angularjs ng-repeat 带有点击事件的隐藏元素答案

【问题标题】：angularjs ng-repeat hide element with a click eventangularjs ng-repeat 带有点击事件的隐藏元素
【发布时间】：2015-10-01 16:49:33
【问题描述】：

有一个使用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元素，类似于following，ng-if可以根据点击事件识别何时隐藏-

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

【问题讨论】：

仅供参考，以下两个答案都要求您获取原始字符串值并将其包装在一个对象中。如果您不能或不愿意这样做，则需要通过从数组中删除项目来对 products 数组本身进行更改。

标签： javascript angularjs

【解决方案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');
};

这是一个小提琴

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

【讨论】：

【解决方案2】：

您可以使用这样的对象数组：$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

【讨论】：

【解决方案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 隐藏项目，将它们与选定的索引进行比较。

【讨论】：