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

angularjs ng-repeat使用单击事件隐藏元素

3 个答案: