Javascript AngularJS：如何在AngularJS中隐藏单击的元素？

我是个新手，我发现做简单的事情对我来说并不明显？我有一个使用ng repeat显示的项目列表。我只想在单击该范围内的元素后隐藏该元素。我想通过良好的实践以“角度”的方式来做。。只是不确定那是什么

这是html

<div ng-app="myApp">
    <div ng-controller="FruitsCtrl">
        <ul>
            <li ng-repeat="fruit in fruits">
                <p>{{fruit.name}}</p>
                <button ng-click="hideMe()">hide li</button>
            </li>
        </ul>
    </div>
</div>

我在jsfiddle上有这个：

帮助或指导将是伟大的！谢谢

您可以使用指令。在添加了属性hide的示例中，如果此属性为true，ngHide将隐藏li

HTML

---

我想知道这对ng hide是如何起作用的。非常感谢。很好！我想你也可以跳过这个函数：

ng click=“fruit.hide=true”

@FooL，但是OP可能需要在这个函数中执行一些操作method@Satpal，没错，这是一个很好的镀金答案。我试图为原始问题“单击时如何隐藏元素？”提供最简单的答案：）两者都有works@FooL，我完全同意你的解决方案，这会奏效的。毫无疑问

var myApp = angular.module('myApp', []);

myApp.factory('Fruits', function () {
    var Fruits = [{
        name: "banana"
    }, {
        name: "watermelon"
    }, {
        name: "strawberry"
    }];

    return Fruits;
});


function FruitsCtrl($scope, Fruits) {
    $scope.fruits = Fruits;

    $scope.hideMe = function () {
        alert('hide this li');
    };
}

<li ng-repeat="fruit in fruits" ng-hide="fruit.hide">
    <p>{{fruit.name}}</p>
    <button ng-click="hideMe(fruit)">hide li</button>
</li>

$scope.hideMe = function (fruit) {
    fruit.hide=true;
    alert('hide this li');
};